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内 容 简 介 


本 书 全 面 、 系 统 地 讲解 了 HTML 5、CSS 3 和 jQuery Mobile 从 Web 界面 设计 到 移动 应 用 开发 的 各 种 技术 和 
知识 点 。 本 书 难 度 适中 ， 知 识 结 构 严 谨 ， 内 容 由 浅 入 深 、 从 易 到 难 ， 讲 解 通俗 易 懂 ， 并 注重 读者 兴趣 的 培养 ， 在 
知识 点 介绍 过 程 中 配合 大 量 案例 进行 讲解 ， 以 帮助 读者 提高 实战 技能 。 

本 书 共 20 章 ， 分 为 四 部 分 。 第 一 部 分 为 第 1 章 内 容 ， 介 绍 了 移动 互联 网 与 移动 Web 技术 的 相关 知识 ， 使 
读者 对 移动 Web 应 用 有 一 定 的 了 解 ; 第 二 部 分 为 第 2 ~ 8 章 ， 介 绍 了 HIML 5 各 方面 的 知识 点 ， 重 点 介绍 了 绘 
图 、 音 频 和 视频 、 新 型 表单 等 内 容 ， 第 三 部 分 为 第 9 ~ 13 章 ， 介 绍 了 CSS 样式 各 属性 的 设置 和 使 用 方法 ， 包 括 
CSS 3 中 新 增 的 弹性 盒 模型 、 多 列 布局 、 动 画 效果 、 渐 变 填充 等 内 容 ， 第 四 部 分 为 第 14 ~ 20 章 ， 介 绍 了 jQuery 
Mobile 的 相关 知识 ， 重 点 介绍 了 jQuery Mobile 的 页 面 、 组 件 、 主 题 、 事 件 和 插件 等 内 容 ， 并 通过 实用 案例 讲解 
了 综合 运用 HTML 5、CSS 3 和 jQuery Mobile 开发 移动 应 用 的 方法 和 技巧 。 

本 书 附 赠 1 张 DVD 光盘 ， 其 中 提供 了 所 有 案例 的 源 文 件 、 素 材 以 及 相关 的 视频 教程 ， 为 读者 学 习 提供 方便 。 

本 书 适合 Web 设计 与 开发 的 初学 者 和 爱好 者 自学 ， 也 适合 有 一 定 Web 前 端 开发 基础 的 网 页 开发 人 员 阅 读 ， 
同时 也 可 作为 各 院 校 相 关 专 业 的 教材 使 用 。 
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| PREFACE 前 于 


移动 互联 网 是 继 互联 网 之 后 的 又 一 次 信息 技术 革命 ， 各 种 与 之 相应 的 新 技术 、 新 应 用 层出不穷 ， 








HTML 5 和 CSS 3 代表 了 下 一 代 的 HTML 和 CSS 技术 ， 它 们 势必 推动 互联 网 的 快速 发 展 。 特 
别 是 在 移动 互联 网 领域 ，HTML 5 和 CSS 3 肩负 着 不 可 蔡 代 的 使 命 ， 并 且 移动 设备 对 HTML 5 和 
CSS 3 都 提供 了 良好 的 支持 。jQuery Mobile 的 宗旨 是 在 各 移动 设备 的 浏览 器 平台 中 形成 统一 、 灵 
活 、 渐 进 增强 的 系统 ， 它 的 简略 之 处 在 于 以 纯 HTML 结构 为 中 心 的 布局 ， 页 面 放置 Div 和 其 他 标准 
的 HTML 组 件 元 素 ， 这 种 结构 方式 更 容易 集成 其 他 的 Web 服务 ， 同 时 与 jQuery 的 集成 也 将 更 加 有 
利于 移动 框架 的 扩展 。 

本 书 从 实用 的 角度 出 发 ， 将 知识 点 与 应 用 案例 相 结合 ， 使 读者 真正 地 掌握 每 个 知识 点 并 能 够 学 以 
致 用 。 通 过 本 书 希 望 能 够 帮助 读者 轻松 地 掌握 HTML 5、CSS 3 和 jQuery Mobile 的 核心 知识 ， 快 
速 进入 移动 应 用 制作 开发 领域 。 


本 书 内 容 
本 书 主要 围绕 移动 应 用 开发 的 核心 技术 展开 ， 全 面 介绍 了 HTML 5、CSS 3 和 jQuery Mobile 


难以 理解 的 地 方 加 以 提示 进行 点 拨 。 全 书 共 分 20 章 ， 每 章 的 主要 内 容 如 下 。 

第 1 章 移动 设备 与 Web 技术 ， 本 章 向 读者 介绍 了 移动 互联 网 、 智 能 手机 和 移动 Web 应 用 的 
相关 知识 ， 使 读者 对 移动 应 用 有 更 加 深入 的 了 解 和 认识 。 

第 2 章 初 识 HTML 5， 本 章 全 面 介 绍 了 HTML 5 的 基础 知识 ， 包 括 HTML 5 的 语法 、 新 增 标 
签 ， 读 者 能 够 对 HTML 5 有 全 面 的 了 解 。 

第 3 章 ”使 用 网 页 基本 标签 ， 本 章 向 读者 介绍 了 文字 、 段 落 、 列 表 、 图 片 和 超 链接 这 些 网 页 中 常 
见 元 素 的 相关 标签 和 其 设置 方法 。 

第 4 章 使 用 HTML 5 结构 标签 ， 本 章 介绍 了 HTML 5 中 新 增 的 文档 结构 标签 和 语义 模块 标签 ， 
并 通过 案例 的 制作 ， 使 读者 能 够 理解 并 掌握 HTML 5 结构 标签 的 作用 和 使 用 方法 。 

第 5 章 使 用 HTML 5 绘图 canvas 元 素 是 HTML 5 的 亮点 之 一 ， 通 过 使 用 canvas 元 素 可 
以 在 网 页 中 绘制 出 各 种 几何 图 形 , 本 章 详细 介绍 了 使 用 HTML 5 中 的 canvas 元 素 在 网 页 中 绘制 图 形 、 
文字 、 渐 变 的 方法 。 

第 6 章 使 用 HTML 5 在 页 面 中 嵌入 视频 和 音频 ， 多 媒体 的 应 用 也 是 HTML 5 的 一 大 亮点 ， 本 
章 详 细 介 绍 了 HTML 5 中 Video 与 Audio 元 素 的 使 用 方法 和 属性 设置 技巧 。 

第 7 章 HTML 5 中 的 表单 ， 本 章 详细 介绍 了 传统 的 表单 元 素 和 HTML 5 中 新 增 的 表单 元 素 ， 
通过 新 增 的 HTML 5 表单 元 素 可 以 在 移动 应 用 中 创建 更 加 友好 的 表单 应 用 。 

第 8 章 HTML 5 本 地 存储 ， 本 章 介绍 了 HTML 5 中 的 两 种 本 地 存储 方式 ， 分 别 是 Web 
Storage 和 Web SQL 数据 库 , 通过 使 用 HTML 5 的 本 地 存储 功能 , 可 以 更 轻松 地 开发 移动 应 用 程序 。 

第 9 章 CSS 样式 基础 ， 本 章 向 读者 介绍 了 有 关 CSS 样式 的 基础 知识 , 包括 CSS 样式 的 语法 、 
CSS 选择 器 、CSS 3 新 增 的 选择 器 以 及 应 用 CSS 样式 的 方法 。 

第 10 章 文字 与 背景 设置 , 本 章 主要 介绍 了 对 文字 与 背景 进行 设置 的 相关 CSS 属性 和 设置 方法 ， 
以 及 使 用 CSS 3 新 增 的 文字 与 背景 相关 属性 所 实现 的 效果 。 

第 11 章 ”边框 与 超 链接 设置 ， 本 章 主要 介绍 了 对 元 素 边框 和 超 链接 进行 设置 的 相关 CSS 属性 





和 设置 方法 ， 并 且 对 CSS 3 中 新 增 的 边框 样式 属性 进行 了 详细 的 讲解 。 

第 12 章 CSS 3 盒 模型 和 界面 设计 ， 本 章 对 传统 的 CSS 盒 模型 与 CSS 3 新 增 的 弹性 盒 模 型 
进行 了 详细 的 讲解 ， 并 且 介 绍 了 网 页 元 素 的 各 种 定位 方法 和 用 户 界 面 设计 属性 。 

第 13 章 CSS 3 动画 效果 , 动画 效果 是 CSS 3 最 突出 的 亮点 ， 通 过 对 相关 CSS 属性 的 设置 ， 
即 可 轻松 地 在 网 页 中 实现 各 种 动画 效果 。 本 章 详细 向 读者 介绍 了 CSS 3 各 种 动画 效果 的 制作 方法 和 
技巧 。 

第 14 章 jQuery 和 jQuery Mobile 基础 ， 本 章 向 读者 介绍 了 JavaScript、jQuery 和 jQuery 
Mobile 的 相关 基础 知识 ， 使 读者 能 更 好 地 理解 这 三 者 之 间 的 联系 。 

第 15 章 jQuery Mobile 页 面 ， 本 章 向 读者 介绍 了 jQuery Mobile 页 面 以 及 各 部 分 结构 的 创建 
和 设置 方法 ， 并 且 还 介绍 了 结构 化 jQuery Mobile 页 面 内 容 的 方法 。 

第 16 章 jQuery Mobile 页 面 组 件 ， 本 章 向 读者 介绍 了 jQuery Mobile 中 的 各 种 页 面 组 件 的 使 
用 和 设置 方法 ， 包 括 按钮 组 件 、 表 单 组 件 、 列 表 组 件 等 。 

第 17 章 使 用 jQuery Mobile 主题 ， 本 章 向 读者 介绍 了 jQurey Mobile 页 面 主题 的 相关 知识 ， 
包括 如 何 使 用 默认 主题 、 自 定义 主题 等 ， 并 且 还 介绍 了 使 用 ThemeRoller 创建 jQuery Mobile 主题 
的 方法 。 

第 18 章 使 用 jQuery Mobile 事件 ， 本 章 向 读者 介绍 了 jQuery Mobile 中 常用 事件 的 设置 和 使 
用 方法 ， 通 过 使 用 jQuery Mobile 事件 可 以 轻松 地 实现 各 种 交互 效果 。 

第 19 章 使 用 jQuery Mobile 插件 ， 本 章 通 过 多 款 jQuery Mobile 实用 插件 的 介绍 ， 使 读者 能 
够 轻松 地 在 jQuery Mobile 页 面 中 创建 常见 的 特效 。 

第 20 章 移动 应 用 开发 实战 ， 本 章 通 过 3 个 实用 的 移动 应 用 案例 进行 制作 讲解 ， 向 读者 介绍 了 
综合 应 用 HTML 5、CSS 3 和 jQuery Mobile 开发 移动 应 用 的 方法 。 


本 书 特 点 


本 书 从 实际 应 用 的 角度 出 发 ， 系 统 地 介绍 了 HTML 5、CSS 3 和 jQuery Mobile 的 核心 知识 ， 
采用 实用 案例 与 知识 点 相 结 合 的 方式 ， 避 免 枯燥 无 味 的 基础 知识 讲解 ， 使 读者 能 够 学 以 臻 用， 掌握 最 
新 的 移动 应 用 开发 技术 。 

e 内 容 全 面 : 本 书 内 容 全 面 ， 涵 盖 HTML 5、CSS 3 和 jQuery Mobile 的 各 方面 知识 。 


切 地 诠释 了 知识 点 在 实际 工作 中 的 应 用 。 

e 语言 简洁 流畅 : 本 书 语言 流畅 、 图 文 并 茂 ， 以 大 量 的 案例 讲解 在 实际 移动 应 用 开发 中 的 制作 
方法 和 技巧 ， 避 免 了 枯燥 无 味 的 说 教 。 

。 视频 辅助 教学 ， 将 案例 的 制作 与 教学 视频 相 结合 ， 使 读者 更 加 容易 理解 所 讲 内 容 。 


本 书 作 者 


本 书 由 李 晓 斌 编著 ， 另 外 张 晓 景 、 解 晓 丽 、 孙 慧 、 程 雪 翩 、 刘 明秀 、 陈 燕 、 胡 丹 丹 、 记 玉 婷 、 刘 
强 、 范 明 、 郑 竣 天 、 王 明 、 史 建华 、 于 海 波 、 孟 权 国 、 张 国 勇 、 贾 勇 、 邹 志 连 、 肖 闵 、 王 延 楠 、 林 学 远 、 
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本 书 配套 的 PPT 课件 请 到 http://www.tupwk.com.cn 下 载 。 
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章 知识 点 $A 
第 1 章 移动 设备 与 Web nn 


发 展 方向 
技 EN MY 了 解 智能 手机 的 发 展 和 智能 手 


机 浏览 器 
继 计算 机 、 互 联网 之 后 ， 移 动 互 联网 正 掀起 第 三 次 信息 技 sa 
理解 移动 Web 浏览 器 的 特点 
术 革 命 的 浪潮 ， 新 技术 、 新 应 用 不 断 涌现 。 本 章 将 向 读者 介绍 了 解 移动 ee 
移动 互联 网 、 智 能 手机 和 移动 Web 应 用 的 相关 基础 知识 ， 使 读 


者 对 移动 Web 应 用 有 更 深入 的 了 解 。 开发 框架 


MY 了 解 移动 应 用 开发 的 注意 事项 














移动 互联 网 是 所 有 移动 应 用 的 基础 ， 越 来 越 多 的 人 在 购物 、 用 餐 、 出 行 、 工 作 时 ， 都 习惯 性 地 掏 
出 手机 ， 查 看 信息 、 查 找 位 置 、 分 享 感 受 、 协 同 工 作 等 ， 移 动 互联 网 给 人 们 的 生活 方式 带 来 了 翻天 覆 
地 的 变化 。 


移动 互联 网 是 使 用 智能 手机 、 平 板 电脑 等 移动 终端 ， 可 同时 提供 语音 、 数 据 、 多 媒体 等 业务 应 

的 开放 式 互联 网 络 。 移 动 互 联网 为 视听 节目 、 游 戏 、 电 子 书籍 等 数字 内 容 的 传播 注入 了 新 的 活力 ， 

为 用 户 消费 数字 内 容 提 供 了 多 样 化 的 选择 。 在 当今 社会 , 移动 互联 网 已 不 仅仅 是 一 种 普通 的 通信 工具 ， 

而 更 多 的 是 人 们 的 “得 力 助手 ”。 

移动 互联 网 相 较 于 传统 互联 网 ， 具 有 便捷 性 、 智 能 性 、 个 性 化 的 特点 。 

。 便捷 性 

便捷 性 不 仅 体 现在 用 户 携带 的 便捷 性 ， 更 表现 在 用 户 使 用 时 间 的 便捷 性 ， 可 随时 随地 非常 方便 地 

接 入 无 线 网 络 。 

。 智能 性 

移动 互联 网 相 比 较 传统 互联 网 ， 在 操作 方面 更 加 智能 ， 可 通过 手动 、 语 音 、 智 能 手机 自动 识别 获 

取 等 功能 实现 信息 收集 进而 进行 智能 机 操作 。 

。 个 性 化 

移动 互联 网 可 在 用 户 许可 的 情况 下 自动 获取 关于 用 户 的 位 置 、 历 史记 录 、 日 常 使 用 习惯 ,并 对 此 
行 后 台 处 理 、 分 析 ， 从 而 将 最 为 符合 用 户 习惯 的 个 性 化 内 容 呈 现 给 用 户 ， 提 高 用 户 体验 。 
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目前 ， 移 动 互联 网 已 渗透 到 工作 、 生 活 的 各 个 方面 ， 其 业务 和 应 用 包括 移动 环境 的 网 页 浏览 、 位 
置 服务 、 在 线 游戏 、 视 频 播放 、 在 线 购物 等 ， 移 动 互联 网 不 仅 体现 出 移动 用 户 可 以 随时 、 随 地 、 随 身 
地 享受 互联 网 业务 带 来 的 便捷 ， 还 表现 为 更 加 多 元 化 和 丰富 的 应 用 。 

。 移动 浏览 /下载 

移动 浏览 不 仅 是 移动 互联 网 最 基本 的 业务 ， 也 是 用 户 使 用 最 多 的 业务 。 在 移动 互联 网 应 用 中 ， 无 
线 下 载 作为 移动 互联 网 重要 的 基础 技术 ， 可 以 为 各 种 应 用 服务 提供 下 载 服务 。 

。 移动 社交 

移动 互联 网 应 用 最 多 的 是 即时 通信 类 社交 软件 ， 例 如 QQ、 微 信 、 微 博 等 。 手 机 自身 具有 的 随时 、 
随地 沟通 等 特点 ， 使 移动 社交 在 移动 互联 网 领域 具有 一 定 的 优势 ， 与 传统 互联 网 相 比 ， 移 动 互联 网 的 
社交 功能 前 景 更 加 乐观 。 

。 移动 搜索 

这 是 一 种 典型 的 移动 互联 网 服务 ， 移 动 搜索 是 基于 移动 网 络 的 搜索 技术 总 称 ， 是 指 用 户 通过 移动 
终端 ， 采 用 多 种 接 入 方式 进行 搜索 ， 获 取 相 关 站 点 及 互联 网 信息 内 容 、 移 动 增值 服务 内 容 及 本 地 信息 
等 用 户 需 要 的 信息 或 服务 。 相 对 于 传统 的 互联 网 搜索 ， 移 动 搜索 可 以 使 用 各 种 相关 信息 帮助 用 户 获 取 
更 个 性 化 、 更 精确 的 搜索 结果 ， 并 可 基于 这 些 精确 和 个 性 化 的 搜索 结果 更 好 地 为 用 户 提供 增值 服务 。 

e 移动 广告 

移动 广告 实际 上 是 一 种 支持 互动 的 网 络 广告 ,具有 网 络 媒体 的 一 切 特征 ， 同 时 由 于 移动 性 使 得 用 
户 能 随时 、 随 地 接受 信息 ， 因 此 比 互联 网 广告 更 具 优势 。 随 着 移动 互联 网 高 速 发 展 的 趋势 ， 必 定 会 带 
动 移动 广告 业务 的 发 展 。 

。 移动 多 媒体 

移动 多 媒体 是 通过 移动 网 络 和 终端 设备 ， 为 移动 用 户 传输 视频 、 音 频 等 多 媒体 内 容 的 移动 业务 。 
随 着 3G、4G 网 络 的 逐渐 普及 ， 以 及 移动 终端 性 能 的 提高 ， 移 动 多 媒体 的 应 用 会 越 来 越 多 ， 使 用 户 
可 以 随时 、 随 地 地 享受 音乐 、 视 频 等 多 媒体 服务 。 

。 在 线 游戏 

随 着 移动 终端 多 媒体 处 理 能 力 的 增强 ， 特 别 是 4G 技术 带 来 的 移动 网 络 传输 速率 提升 ， 移 动 互联 
网 在 线 游戏 已 经 成 为 移动 互联 网 的 重要 应 用 之 一 ， 目 前 移动 互联 网 在 线 游戏 发 展 非常 迅速 。 

。 移动 购物 

移动 购物 即 用 户 通过 各 种 智能 移动 设备 接 入 无 线 互联 网 购买 商品 或 服务 的 业务 。 在 国内 各 大 购物 
网 站 都 已 经 开展 了 手机 在 线 购物 业务 ， 随 着 移动 Web 技术 的 不 断 发 展 ， 移 动 购物 必定 会 得 到 更 大 的 
认同 和 广泛 的 应 用 。 


伴随 着 移动 互联 网 的 发 展 ，Android 和 iOS 系统 的 智能 手机 让 越 来 越 多 的 应 用 程序 在 其 平台 下 
的 软件 市 场 发 布 软件 。 同时 , 各 家 公司 为 了 使 自己 的 产品 线 能 够 更 快 地 在 移动 互联 网 上 占有 市 场 份额 ， 
也 纷纷 将 自己 的 产品 线 布局 到 移动 设备 上 。 


3》1. WAP 1.0 时 代 
早 在 2000 年 的 时 候 ， 移 动 互联 网 就 已 经 进入 了 人 们 的 生活 ， 但 那 时 候 手 机 所 提供 的 功能 有 限 ， 


G2: 


基本 上 只 提供 彩铃 、 图 片 等 服务 内 容 。 这 种 服务 使 相当 一 部 分 创业 者 在 短期 内 得 到 可 观 的 收入 ， 这 个 
时 代 通 常 被 称 为 SP 时 代 。 但 是 ， 这 种 服务 只 能 满足 部 分 手机 用 户 的 低层 次 需求 。 
》2. WAP 2.0 时 代 

直到 2006 年 ， 智 能 手机 的 应 用 进一步 发 展 ， 手 机 用 户 的 需求 开始 发 生变 化 ， 各 种 新 的 手机 应 用 
不 断 推 出 , 如 新 闻 资 讯 、 即 时 聊天 等 。 事实 上 , 这 些 新 的 应 用 也 只 不 过 是 在 SP 时 代 功 能 基础 上 的 升级 ， 
这 段 时 期 称 为 WAP 2.0 时 代 。 
3》3. 3G 时 代 

进入 3G 时 代 ， 移 动 互联 网 迎 来 了 井喷 式 发 展 ， 特 别 是 以 谷歌 、 苹 果 为 首 的 Android 和 iOS 系 
统 的 智能 手机 推出 后 ， 手 机 的 功能 逐渐 变 得 越 来 越 强大 ， 例 如 WIFI 无 线 联网 、 蓝 牙 、 重 力 感应 、 数 
据 存 储 等 功能 ， 让 智能 手机 变 得 不 再 是 一 部 单线 的 通话 工具 。 

Android 和 iOS 系统 的 智能 手机 在 全 球 的 手机 市 场 份额 不 断 扩 大 ， 越 来 越 多 的 用 户 开始 使 用 智 
能 手机 ， 其 原因 有 以 下 几 点 。 

e 硬件 设备 的 提升 

手机 经 过 十 多 年 的 发 展 ， 其 硬件 设备 相 比 以 前 已 经 发 生 翻 天 履 地 的 变化 。 各 种 单 核 、 双 核 甚 至 四 
核 CPU 的 智能 手机 不 断 推 出 ,其 运算 速度 得 到 很 大 的 提升 ,为 大 型 软件 和 游戏 提供 了 很 好 的 硬件 基础 。 

e 系统 的 开放 性 

Android 系统 以 免费 开源 的 方式 打破 了 手机 操作 系统 的 封闭 性 ， 让 各 家 手机 制造 商 可 以 利用 
Android 平台 制造 出 用 户 体验 更 好 、 功 能 更 强大 的 手机 。 虽 然 iOS 系统 没有 像 Android 系统 那样 开 
放 源 代码 ， 但 是 iOS 和 Android 系统 都 提供 了 非常 丰富 的 API 接口 和 文档 ， 开 发 者 可 以 通过 其 提供 
的 API 接口 开发 出 极 具 创意 的 应 用 程序 。 

e 更 好 的 用 户 体验 

采用 Android 或 iOS 系统 的 智能 手机 更 像 是 一 款 移动 掌上 设备 , 不 仅 能 够 提供 手机 最 基本 的 功能 ， 
还 能 够 使 用 许多 丰富 的 软件 、 游 戏 开发 接口 以 及 可 定制 的 用 户 界 面 ， 这 使 得 用 户 可 以 使 用 体验 更 好 、 
界面 更 精美 的 各 种 手机 应 用 。 

。 丰富 的 应 用 程序 

随 着 智能 手机 等 移动 设备 的 不 断 普 及 ， 人 们 对 手机 应 用 软件 的 需求 越 来 越 多 ， 手 机 移动 操作 系 
统 厂 商都 不 约 而 同 地 建立 手机 设备 应 用 程序 市 场 ， 例 如 Apple 的 APP Store、Google 的 Android 
Market 等 ， 给 智能 移动 设备 的 终端 用 户 带 来 巨 量 的 应 用 软件 。 用 户 可 以 随心 所 欲 地 在 智能 手机 中 安 
装 自己 喜欢 的 应 用 ， 手 机 用 户 没有 不 使 用 它们 的 理由 。 


智能 手机 与 平板 电脑 是 指 像 PC( 个 人 电脑 ) 一 样 ， 具 有 独立 的 操作 系统 ， 可 以 由 用 户 自行 安装 
第 三 方 服务 商 提供 的 应 用 程序 ， 并 通过 移动 通信 网 络 实现 无 线 上 网 的 一 类 手持 移动 设备 。 

目前 在 智能 手机 和 平板 电脑 中 应 用 最 为 广泛 的 操作 系统 主要 是 Android、iOS 和 Windows 
Phone 这 3 种 。 
》1. Android( 安 卓 ) 系统 

Android 操作 系统 最 初 由 Andy Rubin 开发 ， 主 要 支持 手机 。2005 年 8 月 由 Google 收购 注资 。 
2007 年 11 月 ，Google 与 84 家 硬件 制造 商 、 软 件 开发 商 及 电信 营运 商 组 建 开放 手机 联盟 共同 研发 
改良 Android 系统 ， 其 后 于 2008 年 10 月 发 布 了 第 一 部 Android 智能 手机 。 如 图 1-1 所 示 为 使 用 
Android 系统 的 智能 手机 和 平板 电脑 。 














》2. iOS( 苹果 ) 系统 

iOS 系统 最 初 是 为 iPhone 手机 设计 使 用 的 ，iPhone 手机 在 市 场 上 一 推出 便 大 获 成 功 ， 于 是 苹 
果 公司 便 陆 续 推 出 了 iPod touch、iPad 和 iPhone 等 产品 ， 如 图 1-2 所 示 。 这 些 产 品 全 部 都 使 用 
iOS 系统 ，iOS 系统 也 是 目前 苹果 公司 推出 的 手持 移动 设备 的 唯一 操作 系统 。 





图 1-2 


二 : iOS 系统 具有 简单 易 懂 的 界面 、 令 人 惊叹 的 功能 ， 以 及 超 强 的 稳定 性 ， 这 些 性 
能 已 经 成 为 iPhone、iPad 和 iPod touch 的 强大 基础 。 


》3. Windows Phone 系统 

Windows Phone 系统 是 微软 公司 发 布 的 一 款 智 能 手机 操作 系统 ， 将 微软 旗下 的 Xbox Live 
游戏 、Xbox Music 音乐 与 独特 的 视频 体验 集成 至 手机 中 。2012 年 6 月 21 日 ， 微 软 公司 正式 发 
布 Windows Phone 8， 采 用 和 Windows 8 相同 的 Windows NT 内 核 ， 如 图 1-3 所 示 为 使 用 
Windows Phone 8 操作 系统 的 智能 手机 。 


提示 Windows Phone 具有 桌面 定制 、 图 标 拖 踊 、 滑 动 控制 等 一 系列 前 卫 的 操作 体验 。 
Windows Phone 提供 适用 于 人 们 包括 工作 和 娱乐 在 内 完整 生活 的 方方面面 。 





随 着 智能 手机 的 发 展 ，Android 系统 的 智能 手机 和 iOS 系统 的 iPhone 手机 不 断 推出 各 种 应 用 程 
序 ， 并 且 都 会 在 系统 中 内 置 一 款 移动 Web 浏览 器 ， 如 Android 系统 中 内 置 的 Android Browser 浏 
览 器 ，iOS 系统 中 内 置 的 Mobile Safari 浏览 器 。 

这 些 移 动 Web 浏览 器 不 同 于 过 去 的 WAP 浏览 器 ， 它 能 够 识别 和 解释 HTML、CSS 样式 和 
JavaScript 等 代码 ， 而 且 它 们 都 有 一 个 共同 的 特点 就 是 其 浏览 器 的 核心 都 是 基于 Webkit。 目 前 ， 
Safari 浏览 器 已 经 成 为 移动 端 表 现 最 好 的 Web 浏览 器 。 

Webkit 实 际 上 是 一 种 浏览 器 引擎 , 同时 也 是 一 个 开源 的 项 目 。 在 桌面 浏览 器 中 , Chrome 浏览 器 、 
Safari 浏览 器 都 已 经 内 置 了 Webkit 引擎 ， 并 支持 HTML 5、CSS 3 特性 。 

Mobile Safari 和 Android Browser 作为 两 个 平台 内 置 的 移动 Web 浏览 器 ， 更 是 继承 各 自 桌面 
端 浏 览 器 的 特点 ， 既 支持 Webkit 引擎 特性 ， 也 支持 HTML 5 和 CSS 3 的 多 种 特性 。 

移动 Web 浏览 器 所 带 来 真正 意义 上 的 改变 ， 就 是 可 以 通过 浏览 器 直接 访问 任何 通过 HTML 静态 
语言 或 类 似 PHP、ASP.NET 等 动态 语言 构建 的 Web 网 站 或 应 用 程序 ， 而 不 仅仅 是 WAP 网 站 。 

为 了 能 够 合理 地 在 移动 Web 浏览 器 中 显示 网 站 或 应 用 程序 界面 ， 需 要 根据 智能 手机 的 屏幕 大 小 
重 构 Web 页 面 的 体验 ， 使 页 面 能 够 自 适应 屏幕 的 大 小 。 如 图 1-4 所 示 为 使 用 手机 Web 浏览 器 浏览 

网 站 页 面 的 显示 效果 。 
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智能 手机 的 移动 Web 浏览 器 具有 以 下 几 个 特点 。 

。 屏幕 尺 二 有限 

由 于 智能 手机 屏幕 尺寸 有 限 , 传统 的 Web 网 站 在 移动 Web 浏览 器 中 很 难 给 用 户 完美 的 用 户 体验 ， 
因此 需要 根据 智能 手机 的 屏幕 大 小 来 定制 移动 版 的 Web 应 用 程序 。 

e 硬件 设备 的 完善 

智能 手机 硬件 设备 的 不 断 升级 优化 ， 使 得 移动 Web 浏览 器 得 到 更 好 的 发 展 ， 同 时 能 够 充分 利用 
CPU 等 硬件 的 更 高 性 能 去 做 更 多 的 事情 。 

e 基于 Webkit 核心 

移动 Web 浏览 器 支持 各 种 Web 技术 标准 ， 并 且 支 持 全 新 的 HTML 5 和 CSS 3 特性 。 

e 触 屏 、 缩 放 等 交互 操作 

在 移动 互联 网 时 代 , 触 屏 手机 的 大 规模 应 用 及 手机 应 用 范围 的 转变 , 使 触摸 屏 成 为 行业 的 大 趋势 。 
其 中 Web 页 面 浏览 、 下 载 、 消 费 等 都 成 为 主要 应 用 场景 ， 用 户 可 以 直接 在 屏幕 上 进行 触摸 、 单 击 来 
完成 交互 操作 。 


各 种 类 型 的 移动 应 用 程序 种 类 繁多 ， 其 开发 的 方式 也 存在 着 差异 ， 有 些 采 用 原生 SDK 进行 开发 ， 
有 些 是 基于 Web 的 应 用 开发 ， 不 同 的 开发 方式 各 有 优 缺 点 。 本 节 将 向 读者 介绍 有 关 移 动 Web 应 用 
开发 的 相关 基础 知识 ， 使 读者 对 移动 Web 应 用 有 更 深入 的 了 解 。 


自 2007 年 Apple 公司 发 布 第 一 款 iPhone 手机 之 后 ， 基 于 移动 终端 的 Web 应 用 便 得 到 发 展 。 
当时 Apple 公司 并 不 允许 第 三 方 开发 者 开发 其 iPhone 应 用 软件 ， 只 允许 他 们 开发 基于 Web 的 应 用 
程序 。 

2008 年 ，Apple 公司 正式 推出 iPhone SDK， 并 开放 App Store 应 用 软件 市 场 。SDK 的 推出 ， 
让 原来 需要 开发 基于 Web 应 用 的 第 三 方 开发 者 几乎 都 转向 iPhone SDK 的 开发 。 

现在 ， 移 动 智能 设备 之 所 以 能 够 风靡 全 球 ， 除 了 因 其 具有 强大 的 硬件 特性 外 ， 更 重要 的 是 它们 拥 
有 巨 量 的 应 用 软件 ， 特 别 是 在 App Store 和 Android Market 上 的 应 用 都 是 基于 两 大 公司 (Apple 和 
Google) 提供 SDK 给 第 三 方 开发 者 进行 开发 的 。Apple 提供 的 是 基于 Object-C 语言 的 iOS SDK 
应 用 开发 ，Google 提供 的 是 基于 Java 语言 的 Android SDK 应 用 开发 。 

基于 原生 SDK 的 开发 存在 以 下 几 点 优势 。 

(1) 更 好 的 用 户 体验 和 交互 操作 。 

(2) 不 受 网 络 限制 ， 节 省 带宽 成 本 。 

(3) 可 以 充分 发 挥 设备 硬件 和 操作 系统 的 特性 。 

原生 SDK 在 开发 应 用 软件 方面 的 优势 非常 明显 ， 但 仍 存在 一 些 不 足 之 处 。 

(1) 平台 间 移 植 困难 ， 存 在 版 本 间 的 兼容 问题 的 风险 。 

(2) 开发 周期 长 ， 维 护 成 本 高 ， 调 试 困难 。 

(3) 需要 依赖 第 三 方 应 用 商店 的 审核 上 架 ， 如 App Store。 


除了 基于 SDK 开发 方式 外 ， 移 动 智 能 设备 还 支持 Web 开发 方式 ， 例 如 iPhone 上 的 App 
Store 就 是 典型 的 Web App 应 用 软件 。 尤 其 是 HTML 5 和 Webkit 的 不 断 发 展 ， 让 移动 Web 应 用 
变 得 更 加 强大 。 

与 原生 SDK 开发 相 比 ， 基 于 Web 的 应 用 开发 存在 以 下 几 点 优势 。 

(1) 开发 效率 高 ， 成 本 低 。 

(2) 跨 平台 应 用 ， 界 面 风 格 统一 。 

(3) 调试 和 发 布 方便 。 

(4) 无 须 安装 或 更 新 。 

基于 Web 的 开发 方式 虽然 在 跨 平台 方面 有 优势 ， 但 并 不 是 所 有 原生 SDK 应 用 都 适合 通过 Web 
方式 实现 ， 还 存在 如 下 几 点 问题 。 

(1) 无 法 发 挥 本 地 硬件 和 操作 系统 的 优势 。 

(2) 受 网 络 环境 的 限制 。 

(3) 难以 实现 复杂 的 用 户 界面 效果 。 

将 原生 SDK 应 用 和 基于 Web 应 用 进行 比较 来 看 ， 两 种 开发 模式 各 有 其 优点 。 目 前 来 看 ， 原 生 
SDK 应 用 能 发 挥 出 智能 手机 特性 的 最 大 效果 ， 而 基于 Web 应 用 则 更 适合 一 些 传统 的 Web 站 点 建立 
移动 Web 版 本 。 


基于 Webkit 内 核 的 浏览 器 的 一 个 最 大 特点 就 是 支持 HTML 5 和 CSS 3 标准 。 基 于 HTML 5、 
CSS 3 和 JavaScript 的 移动 应 用 程序 将 会 是 未 来 的 趋势 。 

》1. canvas 绘图 

HTML 5 标准 最 大 的 变化 就 是 支持 Web 绘图 功能 。canvas 绘图 功能 非常 强大 ， 如 图 形 绘制 、 
路 径 绘制 、 变 形 、 像 素 绘图 等 。 用 户 可 以 通过 获取 HTML 中 的 DOM 元 素 canvas， 并 调用 其 演 染 上 
下 文 的 context 对 象 ， 使 用 JavaScript 语言 进行 图 形 绘制 。 

》2. 多 媒体 

Apple 的 iOS 系统 默认 并 不 支持 播放 Flash 文件 。HTML 5 的 多 媒体 标准 就 是 Apple 公司 的 最 
佳 解决 方案 ， 因 为 它 不 需要 任何 插件 ， 只 需要 几 个 页 面 标签 就 能 实现 多 媒体 的 播放 。 

HTML 5 标准 中 的 多 媒体 、Video 视频 和 Audio 音频 正好 弥补 了 多 年 来 需要 插件 才能 播放 
Flash 的 缺陷 。 现 在 只 需要 利用 Video 和 Audio， 通 过 简单 几 行 页 面 代码 ， 就 能 播放 互联 网 上 的 各 种 
视频 和 音频 文件 。 

但 是 ， 目 前 各 浏览 器 厂商 对 多 媒体 标准 所 支持 的 播放 格式 不 一 致 ， 例 如 Google 的 Chrome 浏 
览 器 支持 的 多 媒体 视频 格式 是 Ogg、MPEG4 和 WebM, 而 Apple 的 Safari 则 只 支持 MPEG4。 

》 3.， 本 地 存储 

为 了 满足 本 地 存储 数据 的 需要 ，HTML 5 标准 中 新 增 了 两 种 存储 机 制 ， 即 Web Storage 和 
Web SQL 数据 库 。 前 者 通过 提供 “ 键 / 值 ”方式 存储 数据 , 后 者 通过 类 似 关 系数 据 库 的 形式 存储 数据 。 
》 4.， 离线 应 用 

HTML 5 标准 规范 提供 一 种 离线 应 用 的 功能 。 当 支持 离线 应 用 的 浏览 器 检测 到 清单 文件 (Manifest 
File) 中 的 任何 资源 文件 时 ， 便 会 下 载 对 应 的 资源 文件 ， 将 它们 缓存 到 本 地 ， 同 时 也 保证 了 本 地 资源 
文件 的 版 本 和 服务 器 上 的 保持 一 致 。 
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对 于 移动 设备 来 说 ， 当 无 网 络 状态 可 用 时 ，Web 浏览 器 便 会 自动 切换 到 离线 状态 ， 并 读 取 本 地 
资源 以 保证 Web 应 用 程序 继续 可 用 。 
》 5. 使 用 地 理 位 置 

很 多 现代 浏览 器 中 都 设置 了 一 种 神奇 的 功能 ， 它 能 够 实时 获取 到 用 户 当前 在 地 图 上 所 在 的 位 置 。 
虽然 地 理 定位 标准 严格 来 说 并 不 属于 HTML 5 标准 规范 的 一 部 分 ， 但 它 已 经 逐渐 得 到 大 部 分 浏览 器 
的 支持 。 


因为 有 了 Webkit 和 HTML 5 的 支持 ， 越 来 越 多 的 Web 开发 者 开始 研究 基于 移动 平台 的 Web 
应 用 框架 ， 例 如 基于 jQuery 页 面 架 构 的 jQuery Mobile、 基 于 ExtJS 架构 的 Sencha Touch， 以 
及 能 够 打通 Web 和 Native 两 者 之 间 通 道 的 PhoneGap 框架 。 

目前 基于 HTML 5 的 移动 Web 框架 存在 两 种 不 同 的 开发 模式 ， 一 种 是 基于 传统 Web 的 开发 ， 
另 一 种 是 基于 组 件 式 的 Web 开发 。 

基于 传统 Web 的 开发 模式 ， 就 是 在 传统 Web 网 站 上 ， 根 据 移 动 设备 平台 的 特点 展示 其 移动 版 
的 Web 站 点 。 目 前 最 能 体现 该 开发 模式 优势 的 Web 框架 是 jQuery Mobile。 通 过 使 用 CSS 3 的 新 
特性 ，Media Queries 模块 能 够 实现 所 开发 的 站 点 在 任何 设备 正常 浏览 ， 包 括 桌面 电脑 和 智能 手机 。 

基于 组 件 式 的 Web 开发 有 些 类 似 于 Ext 所 提供 的 富 客户 端 开发 模式 ， 在 该 模式 下 几乎 所 有 的 组 
件 或 视图 都 封装 在 JavaScript 内 ， 然 后 通过 调用 这 些 组 件 展示 Web 应 用 。 这 种 模式 的 最 佳 代表 是 
Sencha Touch。 

在 本 书 中 将 为 读者 介绍 使 用 jQuery Mobile 移动 Web 应 用 框架 来 开发 移动 设备 Web 应 用 程序 
的 相关 知识 。 


尽管 移动 设备 的 种 类 越 来 越 多 ， 包 括 智能 手机 、 平 板 电 脑 、 网 络 电视 设备 等 ， 但 是 它们 都 支持 
HTML 5 和 CSS 3 特性 ， 这 使 得 制作 应 用 于 移动 设备 的 网 站 或 应 用 程序 比 过 去 更 加 容易 。 


移动 设备 的 屏幕 尺寸 显然 比 桌 面 电脑 的 屏幕 小 得 多 ， 所 以 在 开发 应 用 于 移动 设备 的 网 站 或 应 用 程 
序 时 ， 必 须要 考虑 到 移动 设备 的 屏幕 尺寸 和 分 辩 率 。 

与 智能 手机 不 同 , 平板 电脑 不 仅 拥 有 越 来 越 大 的 屏幕 尺寸 , 而 且 在 浏览 方式 上 也 有 所 不 同 。 例如 ， 
大 部 分 平板 电脑 ( 以 及 一 些 智能 手机 ) 都 能 够 以 横向 或 纵向 模式 进行 浏览 。 这 样 ， 同 一 款 设备 ， 屏 幕 
的 宽度 有 时 为 1024 像素 ， 有 时 则 为 800 像素 或 更 少 。 这 就 要 求 开 发 者 在 开发 移动 Web 和 应 用 程序 
时 ， 需 要 能 够 适应 不 同 屏幕 尺寸 大 小 ， 能 够 始终 给 用 户 带 来 良好 的 用 户 体验 。 


在 设计 应 用 于 移动 设备 的 网 站 或 应 用 程序 时 ， 需 要 记 住 用 户 希 望 浏览 到 的 内 容 与 在 普通 桌面 电脑 
上 浏览 到 的 内 容 总 是 相同 的 。 
例如 ， 移 动用 户 所 在 的 位 置 经 常 发 生变 化 。 也 就 是 说 ， 他 们 通常 在 运动 中 ， 或 是 不 在 家 中 或 办 公 
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室 中 ， 在 访问 网 站 或 应 用 程序 时 通常 带 着 特定 的 目标 。 例 如 ， 用 手机 访问 餐厅 应 用 程序 的 用 户 通常 需 
要 很 快 找到 餐厅 的 位 置 及 电话 号 码 。 如 果 该 移动 应 用 没有 在 醒目 的 地 方 标示 出 地 址 及 电话 号 码 ， 就 会 
给 用 户 的 使 用 带 来 不 便 。 


在 移动 应 用 的 开发 过 程 中 坚持 使 用 正确 的 、 标 准 格式 的 HTML、CSS 样式 以 及 JavaScript 脚 
本 代码 ， 能 够 使 所 开发 的 应 用 适用 于 大 部 分 的 移动 设备 。 
除了 编写 有 效 的 HTML 外 ， 在 为 移动 设备 编写 Web 应 用 时 应 该 考虑 避免 以 下 情况 。 


e HTML 表格 

由 于 移动 设备 的 屏幕 尺寸 很 小 ， 使 用 水 平滑 动 相对 困难 ， 从 而 导致 表格 难以 阅读 ， 在 移动 应 用 的 
开发 过 程 中 要 尽量 避免 使 用 HTML 表格 。 

。 HTML 表格 布局 


根据 W3C 制订 的 Web 标准 ， 不 应 该 使 用 表格 页 面 进行 布局 ， 而 且 在 移动 设备 中 ， 这 些 表格 会 
让 页 面 加 载 速度 变 慢 ， 并 且 影 响 美观 ， 尤 其 是 在 它 与 浏览 器 窗口 不 匹配 时 。 

。 弹出 窗口 

弹出 窗口 也 需要 尽量 避免 ， 在 移动 设备 上 它们 甚至 能 够 让 网 站 或 应 用 程序 变 得 不 可 用 。 有 些 浏览 
器 并 不 支持 弹出 窗口 ， 还 有 一 些 浏览 器 则 总 是 会 用 错误 的 方式 打开 弹出 窗口 。 


e 框架 
许多 移动 设备 都 无 法 支持 HTML 框架 ， 并 且 在 HTML 5 的 规范 中 已 经 废弃 了 框架 相关 的 标签 
(<iframe> 标签 除外 ) 。 


同时 ， 记 住 移动 用 户 通常 需要 为 流量 付费 ， 因 此 Web 应 用 应 该 尽 可 能 小 ( 以 KB 为 单位 )。 使 用 
的 HTML 标签 、CSS 样式 和 服务 器 请 求 越 少 ， 就 会 越 受 欢迎 。 


应 该 在 尽 可 能 多 的 移动 设备 中 对 所 开发 的 移动 应 用 进行 测试 。 尽 管 开 发 人 员 可 以 使 用 不 同 的 浏 
览 器 或 模拟 不 同 的 屏幕 尺寸 来 测试 ， 但 是 如 果 不 直接 在 移动 设备 上 进行 测试 ， 仍 然 可 能 会 出 现 许 多 
问题 。 

下 面 介 绍 一 些 测试 移动 应 用 的 方法 。 

。 使 用 模拟 器 

许多 移动 设备 都 有 在 线 或 离线 模拟 器 ， 其 中 大 部 分 都 是 免费 的 ， 可 以 使 用 移动 设备 模拟 器 对 移动 
应 用 进行 测试 。 

。 借用 朋友 或 同事 的 手机 

可 以 借用 不 同 的 手机 来 测试 应 用 在 手机 上 的 效果 ， 这 样 能 够 更 好 地 检测 移动 应 用 在 不 同 移动 设备 
上 的 表现 效果 。 


本 章 向 读者 介绍 了 移动 互联 网 和 智能 手机 的 相关 基础 知识 ， 使 读者 对 移动 应 用 开发 的 基础 有 所 了 
解 ， 并 且 介 绍 了 移动 Web 应 用 和 移动 应 用 开发 的 相关 知识 ， 了 解 移动 应 用 开发 的 方式 和 流程 ， 为 后 
面 学 习 移动 应 用 开发 打下 基础 。 
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$ 章 知识 点 Vv 
第 2 章 初 识 HTML5 已 RE 全 


WY 掌握 HTML 5 的 语法 结构 


w 了 解 并 掌握 HTML 5 中 新 增 
虽然 HTML 5 目前 仍然 处 于 发 展 的 阶段 ， 但 基于 互联 网 的 标签 

的 应 用 已 经 越 来 越 丰富 ， 这 对 互联 网 应 用 提出 了 更 高 的 要 求 ， 

HTML 5 全 然 已 经 成 为 互联 网 领域 最 热门 的 词语 。 本 章 将 介绍 

HTML 5 的 基础 知识 和 基本 结构 ， 包 括 HTML 5 的 基本 内 容 、 

语法 结构 和 新 增 标签 等 ， 使 读者 对 HTML 5 有 初步 的 认识 。 


w 掌握 HTML 5 的 标准 属性 和 
事件 属性 











HTML 5 是 近 十 年 来 Web 标准 最 巨大 的 飞跃 。 和 以 前 的 版 本 不 同 ，HTML 5 并 非 仅 仅 用 来 表示 
Web 内 容 ， 它 的 使 命 是 将 Web 带 入 一 个 成 熟 的 应 用 平台 ， 在 这 个 平台 上 ， 视 频 、 音 频 、 图 像 、 动 
画 ， 以 及 与 电脑 的 交互 都 被 标准 化 。 尽 管 HTML 5 的 实现 还 有 很 长 的 路 要 走 ， 但 HTML 5 正在 改变 









































Web。 


HTML 的 出 现 由 来 已 久 。1993 年 ，HTML 首次 由 因特网 工程 任务 组 (IETF) 以 因特网 草案 的 形 
式 发 布 。 接 着 ，HTML 的 发 展 一 路 高 歌 : 1995 年 发 布 了 2.0 版 ，1996 年 发 布 了 3.2 版 ，1997 年 
发 布 了 4.0 版 ，1999 年 12 月 发 布 了 4.01 版 。 从 第 三 个 版 本 (3.2 版 ) 开始 ，W3C( 万 维 网 联盟 ) 开 
始 接手 ， 并 负责 后 续 版 本 的 制定 工作 。 

在 HTML 4.01 之 后 ，W3C 的 认识 发 生 了 倒退 ， 把 发 展 HTML 放 在 了 次 要 地 位 ， 而 把 主要 注意 
力 转 移 到 了 XML 和 XHTML 之 上 。 由 于 当时 正 值 CSS 崛起 ,设计 者 对 于 XHTML 的 发 展 深信 不 疑 。 
但 随 着 互联 网 的 发 展 ，HTML 迫切 需要 增加 一 些 新 的 功能 ， 制 定 新 的 规范 。 

为 了 能 够 继续 深入 发 展 HTML 规范 ， 在 2004 年 ， 一 些 浏览 器 厂商 联合 成 立 了 WHATWG(Web 
超 文本 技术 工作 小 组 )， 以 推动 HTML 5 规范 。 最 初 ， WHATWG 的 工作 内 容 包含 两 个 部 分 : Web 
Forms 2.0 和 Web Apps1.0。 它们 都 是 对 HTML 的 发 展 ， 并 被 纳入 HTML 5 的 规范 之 中 。Web 2.0 
也 是 在 那个 时 候 提出 的 。 











































































































2006 年 ，W3C 组 建 了 新 HTML 的 工作 组 ， 非 常 明智 地 采纳 了 WHATWG 的 意见 ， 于 2008 
年 发 布 了 HTML 5 的 工作 草案 。2009 年 ，W3C 停止 了 对 XHTML 2 的 工作 。 紧 接着 ，HTML 5 的 
草案 不 断 地 更 新 。2010 年 ，HTML 5 开始 进入 众多 开发 者 的 视野 。 在 HTML 5 规范 还 没 定稿 的 情况 
下 ， 各 大 浏览 器 厂商 就 已 经 按 探 不 住 了 ， 纷 纷 参与 到 规范 的 制定 中 来 ， 并 对 自己 旗下 的 产品 进行 升级 
以 支持 HTML 5 的 新 功能 。 

HTML 5 规范 涉及 的 内 容 非常 多 ， 众 多 浏览 器 厂商 的 参与 使 得 可 以 及 时 获得 一 些 实验 性 的 反馈 ， 
HTML 5 规范 也 得 以 持续 地 完善 。 与 此 同时 ，IETF 制定 相关 通信 协议 。HTML 5 就 是 以 这 种 方式 快 
速 地 融入 Web 开发 平台 当中 。 


W3C 在 2010 年 1 月 22 日 发 布 了 最 新 的 HTML 5 工作 草案 。HTML 5 的 工作 组 包括 AOL、 
Apple、Google、IBM、Microsoft、Mozila、Nokia、Opera 以 及 数 百 个 其 他 的 开发 商 。 制 定 
HTML 5 的 目的 是 取代 1999 年 W3C 所 制定 的 HTML 4.01 和 XHTML 1.0 标准 ， 希 望 能 够 在 网 络 
应 用 迅速 发 展 的 同时 ， 网 页 语言 能 够 符合 网 络 发 展 的 需求 。 

HTML 5 实际 上 指 的 是 包括 HTML、CSS 样式 和 JavaScript 脚本 在 内 的 一 整套 技术 的 组 合 ， 
希望 通过 HTML 5 能 够 轻松 地 实现 许多 丰富 的 网 络 应 用 需求 ， 而 减少 浏览 器 对 插件 的 依赖 ， 并 且 提 
供 更 多 能 有 效 增强 网 络 应 用 的 标准 集 。 

在 HTML 5 中 添加 了 许多 新 的 应 用 标签 ， 其 中 包括 <video>、<audio> 和 <canvas> 等 标签 ， 
添加 这 些 标签 是 为 了 使 设计 者 能 够 更 轻松 地 在 网 页 中 添加 或 处 理 图 像 和 多 媒体 内 容 。 其 他 新 的 标签 还 
有 <section>、<article>、<header> 和 <nav>， 这 些 新 添加 的 标签 是 为 了 能 够 更 加 丰富 网 页 中 的 
数据 内 容 。 除 了 添加 许多 功能 强大 的 新 标签 和 属性 ， 同 样 也 对 一 些 标签 进行 了 修改 ， 以 方便 适应 快速 
发 展 的 网 络 应 用 。 同 时 也 有 一 些 标签 和 属性 在 HTML 5 标准 中 已 经 被 去 除 。 


对 于 用 户 和 网 站 开发 者 而 言 ，HTML 5 的 出 现 意义 非常 重大 。 因 为 HTML 5 解决 了 Web 页 面 存 
在 的 诸多 问题 ，HTML 5 的 优势 主要 表现 在 以 下 几 个 方面 。 

。 化 繁 为 简 

HTML 5 为 了 做 到 尽 可 能 简化 ， 避 免 了 一 些 不 必要 的 复杂 设计 。 例 如 ，DOCTYPE 声明 的 简化 
处 理 ， 在 过 去 的 HTML 版 本 中 ， 第 一 行 的 DOCTYPE 过 于 宛 长 ， 在 实际 的 Web 开发 中 也 没有 什么 
意义 ， 而 在 HTML 5 中 DOCTYPE 声明 就 非常 简洁 。 

为 了 让 一 切 变 得 简单 ，HTML 5 下 了 很 大 的 功夫 。 为 了 避免 造成 误解 ，HTML 5 对 每 一 个 细节 都 
有 着 非常 明确 的 规范 说 明 ， 不 允许 有 任何 的 歧义 和 模糊 出 现 。 

。 向 下 兼容 

HTML 5 有 着 很 强 的 兼容 能 力 。 在 这 方面 , HTML 5 没有 茵 绪 性 的 革新 ,允许 存在 不 严谨 的 写法 。 
例如 ， 一 些 标签 的 属性 值 没有 使 用 英文 引号 括 起 来 ; 标签 属性 中 包含 大 写字 母 ; 有 的 标签 没有 闭合 等 。 
然而 这 些 不 严谨 的 错误 处 理 方案 ， 在 HTML 5 的 规范 中 都 有 着 明确 的 规定 ， 也 希望 未 来 在 浏览 器 中 
有 一 致 的 支持 。 当 然 对 于 Web 开发 者 来 说 ， 还 是 遵循 严谨 的 代码 编写 规范 比较 好 。 

对 于 HTML 5 的 一 些 新 特性 , 如 果 旧 的 浏览 器 不 支持 , 也 不 会 影响 页 面 的 显示 。 在 HTML 规范 中 ， 
也 考虑 了 这 方面 的 内 容 ， 如 在 HTML 5 中 <input> 标签 的 type 属性 增加 了 很 多 新 的 类 型 ， 当 浏览 器 
不 支持 这 些 类 型 时 ， 黑 认 会 将 其 视 为 text。 
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e 支持 合理 
HTML 5 的 设计 者 们 花费 了 大 量 的 精力 来 研究 通用 的 行为 。 例 如, Google 分析 了 上 百 万 份 的 网 页 ， 
从 中 提取 了 <div> 标签 的 id 名 称 ， 很 多 网 页 开发 人 员 都 这 样 标记 导航 区 域 。 


<div id="nav"> 
// 导航 区 域内 容 


</div> 


既然 该 行为 已 经 大 量 存在 ，HTML 5 就 会 想 办 法 去 改进 ， 所 以 就 直接 增加 了 一 个 <nav> 标签 ， 
用 于 网 页 导航 区 域 。 

。 实用 性 

对 于 HTML 无 法 实现 的 一 些 功 能 ， 用 户 会 寻求 其 他 方法 来 实现 ， 如 对 于 绘图 、 多 媒体 、 地 理 位 
置 和 实时 获取 信息 等 应 用 ， 通 常会 开发 一 些 相应 的 插件 间接 地 去 实现 。HTML 5 的 设计 者 们 研究 了 这 
些 需求 ， 开 发 了 一 系列 用 于 Web 应 用 的 接口 。 

HTML 5 规范 的 制定 是 非常 开放 的 ， 所 有 人 都 可 以 获取 草案 的 内 容 ， 也 可 以 参与 进来 提出 宝贵 的 
意见 。 因 为 开放 ， 所 以 可 以 得 到 更 加 全 面 的 发 展 。 一 切 以 用 户 需求 为 最 终 目的 。 所 以 ， 当 用 户 在 使 用 
HTML 5 的 新 功能 时 ， 会 发 现 正 是 期 待 已 久 的 功能 。 

e 用 户 优先 

在 遇 到 无 法 解决 的 冲突 时 ，HTML 5 规范 会 把 最 终 用 户 的 诉求 放 在 第 一 位 。 因 此 ，HTML 5 的 绝 
大 部 分 功能 都 是 非常 实用 的 。 用 户 与 开发 者 的 重要 性 远 远 高 于 规范 和 理论 。 例 如 ， 有 很 多 用 户 都 需要 
实现 一 个 新 的 功能 ，HTML 5 规范 设计 者 们 会 研究 这 种 需求 ， 并 纳入 规范 ; HTML 5 规范 了 一 套 错误 
处 理 机 制 ， 以 便当 Web 开发 者 写 了 不 够 严谨 的 代码 时 ， 接 纳 这 种 不 严谨 的 写法 。HTML 5 比 以 前 版 
本 的 HTML 更 加 友好 。 


HTML 5 的 语法 结构 和 HTML 的 语法 结构 基本 一 致 ， 下 面 将 分 别 介绍 HTML 5 的 文档 结构 与 基 
本 语法 。 


编写 HTML 文件 的 时 候 ， 必 须 遵循 HTML 的 语法 规则 。 一 个 完整 的 HTML 文件 由 标题 、 段 落 、 
列表 、 表 格 、 单 词 和 府 入 的 各 种 对 象 所 组 成 。 这 些 逻 辑 上 统一 的 对 象 统称 为 元 素 ，HTML 使 用 标签 来 
分 割 并 描述 这 些 元 素 。 实 际 上 整个 HTML 文件 就 是 由 元 素 与 标签 组 成 的 。 


HTML 文件 基本 结构 如 下 。 

<html> <!--HTML 文件 开始 --> 
<head> <!--HTML 文件 的 头 部 开始 --> 
</head> <!--HTML 文件 的 头 部 结束 --> 
<body> <!--HTML 文件 的 主体 开始 --> 
</body> <!--HTML 文件 的 主体 结束 --> 
</html> <!--HTML 文件 结束 --> 
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可 以 看 到 ， 代 码 分 为 三 部 分 。 

® <html>…</html> 

告诉 浏览 器 HTML 文件 的 开始 和 结束 ，<html> 标签 出 现在 HTML 文档 的 第 一 行 ， 用 来 表示 
HTML 文档 的 开始 。</html> 标签 出 现在 HTML 文档 的 最 后 一 行 ， 用 来 表示 HTML 文档 的 结束 。 两 
个 标签 一 定 要 一 起 使 用 ， 网 页 中 的 所 有 其 他 内 容 都 需要 放 在 “html> 与 </html> 之 间 。 

e <head>…</head> 

网 页 的 头 标签 ， 用 来 定义 HTML 文档 的 头 部 信息 ， 该 标签 也 是 成 对 使 用 的 。 

® <body>…</body> 

在 <head> 标签 之 后 就 是 <body> 与 </body> 标签 了 ， 该 标签 也 是 成 对 出 现 的 。<body> 与 
</body> 标签 之 间 为 网 页 主体 内 容 和 其 他 用 于 控制 内 容 显示 的 标签 。 


绝 大 多 数 元 素 都 有 起 始 标签 和 结束 标签 ， 在 起 始 标签 和 结束 标签 之 间 的 部 分 是 元 素 体 ， 例 如 
<body>…</body>。 第 一 个 元 素 都 有 名 称 和 可 选择 的 属性 ,元 素 的 名 称 和 属性 都 在 起 始 标签 内 标明 。 

e 普通 标签 

普通 标签 是 由 一 个 起 始 标签 和 一 个 结束 标签 所 组 成 的 ， 其 语法 格式 如 下 。 

<x> 控制 文字 </x> 


其 中 ，x 代表 标签 名 称 。<x> 和 </x> 就 如 同一 组 开关 :起 始 标签 <x> 为 开启 某 种 功能 ， 而 结束 
标签 </x>( 通常 为 起 始 标签 加 上 一 个 斜 线 /) 为 关闭 功能 ， 受 控制 的 文字 信息 便 放 在 两 标签 之 间 ， 例 如 
下 面 的 代码 。 


<b> 加 粗 文字 </b> 
标签 之 中 还 可 以 附加 一 些 属性 ， 用 来 实现 或 完成 某 些 特殊 效果 或 功能 ， 例 如 下 面 的 代码 。 
<x ai="vi"，a2="va"，…，an="va"> 控制 文字 </x> 


其 中 , ai，az，…，an 为 属性 名 称 , 而 vi,，vz，…， Vn 则 是 其 所 对 应 的 属性 值 。 属 性 值 加 不 加 引号 ， 
目前 所 使 用 的 浏览 器 都 可 接受 ， 但 根据 W3C 的 新 标准 ， 属 性 值 是 要 加 引号 的 ， 所 以 最 好 养 成 加 引号 
的 习惯 。 

。 空 标签 

虽然 大 部 分 的 标签 是 成 对 出 现 的 ， 但 也 有 一 些 是 单独 存在 的 ， 这 些 单独 存在 的 标签 称 为 空 标签 ， 
其 语法 格式 如 下 。 


<x> 

同样 ， 空 标签 也 可 以 附加 一 些 属性 ， 用 来 完成 某 些 特殊 效果 或 功能 ， 例 如 下 面 的 代码 。 
<XA="V"y A="V2"y As="Va"> 

例如 下 面 的 代码 。 


<hr color="#0000FF" > 
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其 实 HTML 5 还 有 其 他 更 为 复杂 的 语法 ， 使 用 技巧 也 非常 多 ， 作 为 一 种 语言 ， 
它 有 很 多 的 编写 原则 并 且 以 很 快 的 速度 发 展 着 。 





HTML 5 避免 了 不 必要 的 复杂 性 ，DOCTYPE 和 字符 集 都 极 大 简化 了 。 
DOCTYPE 声明 是 HTML 文件 中 必 不 可 少 的 内 容 ， 它 位 于 HTML 文档 的 第 一 行 ， 声 明了 
HTML 文件 遵循 的 规范 。HTML 4.01 的 DOCTYPE 声明 代码 如 下 。 


<!DOCTYPE HTML PUBLIC" -//W3C//DTD HTML 4.01 Transitional//EN " " http://www. 
Ww3.0rg/TR/html4/loose.dtd"> 


这 么 长 的 一 串 代码 恐怕 极 少 有 人 能 够 默写 出 来 ， 通 常 都 是 通过 复制 、 粘 贴 的 方式 添加 这 段 代 码 。 
而 在 HTML 5 中 的 DOCTYPE 代码 则 非常 简单 ， 如 下 所 示 。 


<!DOCYPT html> 


这 样 就 简洁 了 许多 ， 不 需要 再 复制 、 粘 贴 代码 了 。 同 时 这 种 声明 也 标志 性 地 让 人 感觉 到 这 是 符合 
HTML 5 规范 的 页 面 。 如 果 使 用 了 HTML 5 的 DOCTYPE 声明 ， 则 会 触发 浏览 器 以 标准 兼容 的 模式 
来 显示 页 面 。 

字符 集 的 声明 也 是 非常 重要 的 ， 它 决定 了 页 面 文件 的 编码 方式 。 在 过 去 ， 都 是 使 用 如 下 的 方式 来 
指定 字符 集 的 ， 代 码 如 下 。 


<meta http-equiv=" Content-Type "content="text/html; charset=utf-8"> 


HTML 5 对 字符 集 的 声明 也 进行 了 简化 处 理 ， 简 化 后 的 声明 代码 如 下 。 


<meta charset="utf-8"> 


在 HTML 5 中, 以 上 两 种 字符 集 的 声明 方式 都 可 以 使 用 , 这 是 由 HTML 5 向 下 兼容 的 原则 决定 的 。 


在 HTML 5 中 新 增 了 许多 新 的 有 意义 的 标签 ， 为 了 方便 学 习 和 记忆 ， 在 本 节 中 将 HTML 5 中 新 
增 的 标签 进行 分 类 介绍 。 


HTML 5 中 新 增 的 结构 标签 说 明 如 表 2-1 所 示 。 





表 2-1 结构 标签 说 明 

说 了 明 

<article> 标签 用 于 在 网 页 中 标识 独立 的 主体 内 容 区 域 ， 可 用 于 论坛 帖子 、 报 纸 文章 、 博 
客 条 目 和 用 户 评论 等 

<aside> 标签 用 于 在 网 页 中 标识 非 主体 内 容 区 域 ， 该 区 域 中 的 内 容 应 该 与 附近 的 主体 内 
容 相关 

<section> 标签 用 于 在 网 页 中 标识 文档 的 小 节 或 部 分 

<footer> 标签 用 于 在 网 页 中 标识 页 脚 部 分 ， 或 者 内 容 区 块 的 脚注 

<header> 标签 用 于 在 网 页 中 标识 页 首部 分 ， 或 者 内 容 区 块 的 标 头 

<nav> 标签 用 于 在 网 页 中 标识 导航 部 分 







HTML 5 中 新 增 的 文本 标签 说 明 如 表 2-2 所 示 。 


表 2-2 文本 标签 说 明 
说 明 
<bdi> 标签 在 网 页 中 允许 设置 一 段 文本 ， 使 其 脱离 其 父 元 素 的 文本 方向 设置 
<mark> 标签 在 网 页 中 用 于 标识 需要 高 亮 显示 的 文本 
<time> 标签 在 网 页 中 用 于 标识 日 期 或 时 间 
<output> 标签 在 网 页 中 用 于 标识 一 个 输出 的 结果 





HTML 5 中 新 增 的 应 用 和 辅助 标签 说 明 如 表 2-3 所 示 。 


表 2-3 应 用 和 辅助 标签 说 明 
说 朋 

<audio> 标签 用 于 在 网 页 中 定义 声音 ， 如 背景 音乐 或 其 他 音频 流 
<video> 标签 用 于 在 网 页 中 定义 视频 ， 如 电影 片段 或 其 他 视频 流 
<source> 标签 为 媒介 标签 ( 如 video 和 audio)， 在 网 页 中 用 于 定义 媒介 资源 
<track> 标签 在 网 页 中 为 例如 video 元 素 之 类 的 媒介 规定 外 部 文本 轨道 
<canvas> 标签 在 网 页 中 用 于 定义 图 形 ， 例 如 图 标 和 其 他 图 像 。 该 标签 只 是 图 形容 器 ， 
必须 使 用 脚本 绘制 图 形 
<embed> 标签 在 网 页 中 用 于 标识 来 自 外 部 的 互动 内 容 或 插件 









HTML 5 中 新 增 的 进度 标签 说 明 如 表 2-4 所 示 。 


表 2-4 ”进度 标签 说 明 
说 明 
<progress> 标签 用 于 在 网 页 中 标识 任务 进度 显示 的 进度 条 
在 网 页 中 使 用 <meter> 标签 ， 可 以 根据 value 属性 赋值 和 最 大 、 最 小 值 的 度量 进行 显 
示 的 进度 条 
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HTML 5 中 新 增 的 交互 性 标签 说 明 如 表 2-5 所 示 。 
表 2-5 交互 性 标签 说 明 










说 明 

<command> 标签 用 于 在 网 页 中 标识 一 个 命令 元 素 ( 单 选 、 复 选 或 者 按钮 ); 当 且 仅 当 
这 个 元 素 出 现在 <menu> 标签 里 面 时 才 会 被 显示 ， 否 则 将 只 能 作为 键盘 快捷 方式 的 一 
个 载体 

<datalist> 标签 用 于 在 网 页 中 标识 一 个 选项 组 ， 与 <input> 标签 配合 使 用 该 标签 ， 来 定 
义 input 元 素 可 能 的 值 





HTML 5 中 新 增 的 在 文档 和 应 用 中 使 用 的 标签 说 明 如 表 2-6 所 示 。 


表 2-6 文档 和 应 用 中 使 用 的 标签 说 明 

说 明 
[Getails> <details> 标签 在 网 页 中 用 于 标识 描述 文档 或 者 文档 某 个 部 分 的 细节 
Romimay3 四 <summary> 标签 在 网 页 中 用 于 标识 <details> 标签 内 容 的 标题 
[iocaptiorn | <figcaption> 标签 在 网 页 中 用 于 标识 <figure> 标签 内 容 的 标题 
<figure> 标签 用 于 在 网 页 中 标识 一 块 独立 的 流 内 容 ( 图 像 、 图 表 、 照 片 和 代码 等 ) 


igure> 
<hgroup> 标签 在 网 页 中 用 于 标识 文档 或 内 容 的 多 个 标题 。 用 于 将 h1 至 h6 元 素 打 旬 ， 
优化 页 面 结构 在 SEO 中 的 表现 





HTML 5 中 新 增 的 <ruby> 标签 说 明 如 表 2-7 所 示 。 
表 2-7 <ruby> 标签 说 明 


<ruby> 标签 在 网 页 中 用 于 标识 ruby 注释 ( 中 文 注音 或 字符 ) 
<Ip> 标签 在 ruby 注释 中 使 用 ， 以 定义 不 支持 <ruby> 标签 的 浏览 器 所 显示 的 内 容 
<rt> 标签 在 网 页 中 用 于 标识 字符 ( 中 文 注音 或 字符 ) 的 解释 或 发 音 





HTML 5 中 新 增 的 其 他 标签 说 明 如 表 2-8 所 示 。 


表 2-8 其 他 标签 说 明 
ee 说 。 
ES | <keygen> 标签 用 于 标识 表单 密 钥 生 成 器 元 素 。 当 提交 表单 时 ， 私 密 钥 存储 在 本 地 ， 公 
密 钥 发 送 到 服务 器 


<wbr> 标签 用 于 标识 单词 中 适当 的 换行 位 置 ， 可 以 用 该 标签 为 一 个 长 单词 指定 合适 的 换 
行 位 置 


G's 


在 HTML 中 标签 拥有 属性 ， 在 HTML 5 中 新 增 的 属性 有 contenteditable、contextmenu、 
draggable、 irrelevant、 ref、 registrationmark、template, 不 再 支持 HTML 4.01 中 的 accesskey 属性 。 
HTML 5 标准 属性 介绍 如 表 2-9 所 示 。 


表 2-9 HTML 5 标准 属性 介绍 






CI 
acceskey LU character 设置 访问 一 个 元 素 的 键盘 快捷 键 x VY 
5a class_rule or style_rule 元素 的 类 名 V 
true 设置 是 否 允 许 用 户 编辑 元 素 x 又 
false 
[CieXimenu id of a menu element 给 元 素 设置 一 个 上 下 文 菜单 x V 
Itr 设置 文本 方向 a NA 
ntl 
true 设置 是 否 允许 用 户 拖 动 元 素 x A 
false 
auto 
mia_name 元 素 的 唯一 id V 汉 
true 设置 元 素 是 否 相关 ， 不 显示 非 相关 的 x 区 
false 元 素 
I 而 anguage_code 设置 语言 码 V 区 
url of elementid 引用 另 一 个 文档 或 文档 上 另 一 个 位 x Ev 
置 ， 仅 在 template 属性 设置 时 使 用 
registration mark 为 元 素 设置 快照 ， 可 以 应 用 于 除 <nest> x 人 
元 素 以 外 的 任何 <rule> 元 素 的 后 代 
元 素 
style_definition 行内 的 样式 定义 V 区 
number 设置 元 素 的 tab 顺序 这 V 
| url or elementid 引用 应 该 应 用 到 该 元 素 的 另 一 个 文档 x V 
或 本 文档 上 另 一 个 位 置 
[SU tootip text 显示 在 工具 提示 中 的 文本 V V 


HTML 元 素 可 以 拥有 事件 属性 ， 这 些 属 性 在 浏览 器 中 触发 行为 ， 例 如 当 用 户 单 击 一 个 HTML 元 
素 时 启动 一 段 JavaScript 脚本 。 下 面 列 出 的 事件 属性 ， 可 以 把 它们 插入 到 HTML 中 来 定义 事件 行为 。 
HTML 5 中 的 新 事件 : onabort、onbeforeunload、oncontextmenu、ondrag、ondragend、 
ondragenter、ondragleave、ondragover、ondragstart、ondrop、onerror、onmessage、 
onmousewheel、onresize、onscroll、onunload。 不 再 支持 HTML 4.0.1 属性 : onreset。 
HTML 5 所 支持 的 事件 属性 如 表 2-10 所 示 。 
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表 2-10 HTML 5 事件 属性 


‘onabort script ”发生 abort 事件 时 运行 脚本 x 

[6neroreunisad script 。 在 文档 卸载 之 前 运行 脚本 x ， 
55g script 。 当 元 素 失去 焦点 时 运行 妓 本 V V 
lanenanae script 。 当 元 素 改 变 时 运行 脚本 V V 
Ge cript 。 在 鼠标 单 击 时 运行 脚本 V V 
[naonteximeno script 。 当 菜单 被 触发 时 运行 脚本 V 
[GANaOIGICA script 。 当 电 标 双击 时 运行 脚本 V V 
[Ga script 。 只 要 即 本 再 被 拖 动 就 运行 脚本 x V 
[Caragenal cript 。 在 拖 动 操作 结束 时 运行 脚本 x 党 
[GANGragSHIGM | script 。 当 元 素 被 拖 动 到 一 个 合法 的 放置 目标 时 ， 执 行 脚本 x V 
a scrpt 。 当 元 素 高 开 合法 的 放置 目标 时 ， 执 行 脚本 x V 
[Gaf5OOVG LU script 。 只 要 元 素 正在 合法 的 放置 目标 上 拖 动 时 ， 就 执行 脚本 x V 
[GaSUSIST | script 。 当 拖 动 操作 开始 时 执行 脚本 x V 
夯 而 script 。 当 元 素 正在 被 拖 动 时 执行 脚本 x V 
[Geron script 。， 当 元 素 加 载 的 过 程 中 出 现 错误 时 执行 脚本 x V 
夯 砚 本 script 。 当 元 素 获得 焦点 时 执行 脚本 V 忌 
R85 script 。 当 按钮 按 下 时 执行 脚本 V V 
script 。 当 按键 被 按 下 时 执行 脚本 V V 
而 RB LU script 。 当 按钮 松 开 时 执行 脚本 V 也 
[EGR :cript 。 当 文档 加 载 时 执行 脚本 V V 
mss script 。 当 message 事件 触发 时 执行 脚本 x 说 
[Gmavsaaam LU script 。 当 鼠 标 按钮 按 下 时 执行 脚本 V V 
[mavsemaa script 。 当 刀 标 指针 移动 时 执行 脚本 V V 
[GaoUseoven script 。 当 刀 标 指 针 移动 到 一 个 元 素 上 时 执行 脚本 V V 
[CGOUS5oUi script 。 当 鼠 标 指 针 移出 元 素 时 执行 脚本 V V 
[GAOUSSUD script 。 当 刀 标 按钮 松 开 时 执行 脚本 V V 
[ENGUSSAWSS LU script 。 当 刀 标 滚轮 滚动 时 执行 脚本 x V 
[GE :cript 。， 不 支持 ， 当 表单 重 置 时 执行 脚本 V x 
夯 厨 本 script 。 当 元 素 调 整 大 小 时 运行 脚本 x V 
后 5 顺风 :cnipt 。 当 元 卖 滚动 条 被 滚动 时 执行 脚本 x V 
[SEC U :cnipt 。 当 元 素 被 选中 时 执行 脚本 V 
cript 。 当 去 单 提交 时 运行 脚本 V V 
而 而 cript 。 当 文档 卸载 时 运行 脚本 四 V 


ET 





与 HTML 4 相 比 ，HTML 5 的 发 展 有 着 革命 性 的 进步 。 本 章 主要 讲解 了 HTML 5 的 基础 知识 ， 
包括 HTML 5 的 发 展 、 优 势 、 结 构 和 语法 等 ， 重 点 介绍 了 HTML 5 中 新 增 的 标签 。 读 者 应 该 仔细 学 
习 本 章 内 容 ， 对 HTML 5 做 好 初 识 工作 ， 为 后 面 学 习 HTML 5 的 相关 知识 打下 良好 的 基础 ， 便 于 更 
地 掌握 和 使 用 HTML 5。 
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rr v~ 
一 了 ry [me 本 章 知识 点 
第 3 章 使 用 网 页 基本 标签 ~ 
相关 标签 使 用 方法 
MY 掌握 段落 效果 设置 的 相关 标签 
文字 与 图 片 是 网 页 中 最 基本 的 元 素 , 任何 网 页 都 不 可 缺少 ， 使 用 方法 
而 且 是 网 页 视觉 传达 最 直接 的 方式 。 超 链接 在 网 页 中 也 是 必 不 可 Am 掌握 在 网 页 中 创建 项 目 列表 、 
少 的 部 分 ， 在 浏览 网 页 时 ， 单 击 一 张 图 片 或 者 一 段 文字 就 可 以 跳 编号 列表 和 定义 列表 的 方法 
转 到 相应 的 网 页 中 ， 这 些 功 能 都 是 通过 超 链接 来 实现 的 。 本 章 主 WY 掌握 在 网 页 中 插入 图 片 和 实现 
要 向 读者 介绍 网 页 中 各 种 基本 标签 的 使 用 和 设置 方法 。 图 文 混 排 的 方法 
MY 了 解 什么 是 超 链 接 以 及 相对 路 


径 和 绝对 路 径 
YW 掌握 网 页 中 各 种 超 链接 的 创建 








设计 网 页 离 不 开 字体 的 设置 ， 恰 当 的 字体 运用 能 够 丰富 网 页 的 内 容 ， 美 化 文字 的 视觉 效果 。 本 节 
从 文字 的 细节 修饰 着 手 ， 使 读者 轻松 掌握 HTML 的 各 种 字体 格式 的 变化 ， 制 作出 更 加 精美 的 网 页 。 



































<font> 标签 可 以 用 来 设置 文字 的 颜色 、 字 体 和 大 小 ， 是 网 页 设计 的 常用 属性 。 可 以 通过 <font> 
标签 中 的 face 属性 设置 不 同 的 字体 ， 可 以 通过 size 属性 来 设置 文字 的 字体 大 小 ， 还 可 以 通过 color 
属性 来 设置 文字 的 颜色 。 

<font> 标签 的 基本 语法 如 下 。 

<font face=" 字体 " size=" 字体 字号 "color=" 字体 颜色 ">…</font> 


<font> 标签 的 相关 属性 说 明 如 表 3-1 所 示 。 























表 3-1 <font> 标签 的 相关 属性 

说 明 

face 属性 用 于 设置 文字 字体 。HTML 网 页 中 显示 的 字体 从 浏览 器 端的 系统 中 调用 ， 所 
以 为 了 保持 字体 一 致 ， 建 议 采用 宋体 ， 即 HTML 网 页 的 默认 字体 

Size 属性 用 于 设置 文字 的 大 小 。size 的 值 为 1~7， 默 认 值 为 3， 也 可 以 在 属性 值 之 前 加 
上 + 或 -字符 ,来 指定 相对 于 初始 值 的 增 量 或 减 量 








( 续 表 ) 


El | 说 ” 明 
color 属性 用 于 设置 文字 的 颜色 ， 它 可 以 用 浏览 串 承 认 的 颜色 名 称 和 十 六 进 制 数值 表示 。 
在 HTML 页面 中 , 可 以 通过 不 同 的 颇 色 表现 不 同 的 文字 效果 , 从 而 增加 网 页 的 亮丽 色彩 ， 
吸引 浏览 者 的 注意 
使 用 <font> 标签 设置 网 页 文字 效果 


最 终 文件 : 光盘 \ 最 终 文件 \ 第 3 章 \3-1-1.html 。 视频 : 光盘 \ 视 频 \ 第 3 章 \3-1-1.mp4 


I 执行 “文件 > 打开” 命令, 打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-1-1.html”， 效 果 如 图 3-1 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 HTML 代码 ， 如 图 3-2 所 示 。 
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“is 的 it 工作 本 简称 
5 i 














图 3-1 站 图 3-2 


到 玫 为 页 面 中 相应 的 文字 添加 <font> 标签 ， 并 在 该 标签 中 添加 相应 的 属性 设置 ， 如 图 3-3 所 示 。 
保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 设置 后 文字 的 效果 ， 如 图 3-4 所 示 。 


<div 1d="box"> 
<div 1d="logo"><ing src="images/31162.jpg" width= 
"138" height="36" alt=""/></di 
<div id="text"><font_face=" 微 软 雅 黑 " size="24pxn 
color="#FFFFFF"> 关 于 我 们 </ font><br> 
我 们 专注 于 互动 视 沉 设计 ， 验 设计 的 创新 设计 工 
作 室 。 简 称 sTupI0， 工作 室 成 立 于 2614 年 初 ， 在 互动 设计 和 
ey ve 本 关于 我 们 
传播 服务 ， 以 客户 品牌 形象 为 重 ， 提 供 精确 的 策划 方案 与 视觉 
设计 方案 ， 团 队 整 体 有 着 国际 化 意识 与 前 瞻 思 想 ; 以 视觉 设计 


创意 带动 客户 品牌 提升 ， 洞 察 互联 网 发 展 趋势 。 建 立 更 好 的 网 
络 形象 与 口碑 ， 把 客户 企业 品牌 形象 做 到 国际 化 ， 并 且 详 现 商 
业 价值 是 团队 成 立 的 本 意 ! </div> 

</div> 


图 3-3 图 3-4 




















设置 网 页 中 的 文字 颜色 时 ， 要 注意 文字 颜色 应 清晰 、 醒 目 ， 并 且 与 网 页 的 背景 
色相 搭配 ， 从 而 提高 网 页 文字 的 可 读 性 和 网 页 的 整体 美观 程度 。 





[国运 回 网 页 的 HTML 代码 中 , 使 用 相同 的 方法 为 其 他 相应 的 文字 添加 <font> 标签 , 并 进行 设置 ， 
如 图 3-5 所 示 。 保 存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 设置 后 文字 的 效果 ， 如 图 3-6 所 示 。 


(«EY 








<div id="box"> 


<img src="images/31102.jpg" width= 





<font face=" 宋 体 " size="+l"”color="#FFFFFF"> 我 们 专 
- 号 | 


STUDIO， 工作 室 成 立 于 26914 年 初 , 在 互 


团队 侣 体 有 着 国际 化 意识 与 前 瞎 思 想 ; 以 入 芝 设 计 创 意 各 动 音 
户 品 ， 洞察 互 联网 发 展 趋势 。 建 立 更 好 


联 网 络 形象 与 口 
碑 ， 把 客户 企业 品牌 形象 信 到 国际 化 ， 并 有 实现 商业 价 信 是 团 
队 成 立 的 本 意 ! </font></div> 
</div> 














图 3-5 


在 网 页 中 通过 <font> 标签 设置 字体 时 ， 可 以 将 文字 设置 为 任意 的 字体 ， 但 是 所 
设置 的 字体 必须 在 浏览 该 网 页 的 电脑 中 也 安装 才能 正确 显示 该 字体 ， 否 则 电脑 中 没 
有 安装 的 特殊 字体 会 被 浏览 器 中 的 普通 字体 所 蔡 代 。 目 前 ， 在 操作 系统 中 默认 安装 
的 中 文字 体 有 宋体 、 黑 色 、 幼 圆 和 微软 雅 黑 等 。 


网 页 中 对 需要 强调 的 内 容 很 多 使 用 了 加 粗 的 方法 ， 以 使 文字 更 加 醒目 。 可 以 实现 加 粗 效 果 的 标签 
是 <b> 标签 和 <strong> 标签 ， 其 中 <strong> 标签 被 称 为 特别 强调 标签 ， 目 前 比 <b> 标签 使 用 更 


加 频繁 。 
加 粗 文字 <b> 和 <strong> 标签 的 基本 语法 如 下 。 


<b> 这 是 粗 体 字 </b> 
<strong> 这 也 是 粗 体 字 </strong> 


在 <b> 和 </b> 之 间 的 文字 或 在 <strong> 和 </strong> 之 间 的 文字 , 在 浏览 器 中 都 会 以 粗 体 显 示 。 


粗 体 文字 标签 <b> 和 <strong> 都 是 需要 添加 结束 标签 的 , 如 果 没 有 结束 标签 ， 
则 浏览 器 会 认为 从 <b> 或 <strong> 标签 开始 的 所 有 文字 都 是 粗 体 。 





标签 <i> 能 够 使 作用 范围 内 的 文字 倾斜 ; <em> 是 强调 标签 ， 它 的 效果 也 是 使 文字 倾斜， 目前 比 
<i> 标签 使 用 更 加 频繁 。 
倾斜 文字 标签 <i> 和 <em> 的 基本 语法 如 下 。 


<i> 斜体 文字 </i> 
<em> 斜体 文字 </em> 
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<u> 标签 的 使 用 和 粗 体 以 及 斜体 标签 类 似 ， 可 以 使 用 该 标签 作用 于 需要 添加 下 划 线 的 文字 。<u> 
标签 的 基本 语法 如 下 。 


<u> 添加 了 一 条 下 划 线 </u> 
在 网 页 中 除了 可 以 使 用 <u> 标签 实现 文字 的 下 划 线 效果 ， 还 可 以 通过 CSS 样 
区 | 式 中 的 text-decoration 属性 ， 设 置 该 属性 值 为 underline， 为 网 页 中 需要 实现 下 划 
线 的 文字 应 用 相应 的 CSS 样式 ， 同 样 可 以 实现 下 划 线 的 效果 。 


为 文字 添加 加 粗 、 倾 斜 和 下 划 线 修饰 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 3 章 \3-1-4.html 视频: 光盘 \ 视 频 \ 第 3 章 \3-1-4.mp4 


I 执行 “文件 > 打开 ”命令 ,打开 页 面 “光盘 \ 源 文件 \ 第 3 章 \3-1-4.html”, 效果 如 图 3-7 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 HTML 代码 ， 如 图 3-8 所 示 。 


RU ren en 各 Ey d=" ea 
V id="text"> 七彩 光 年 工作 室 是 专业 从 事 互联 网 相 
关 业 务 开 必 的 公司 。 Se 业 的 网 站 建 
设 方案 为 企业 打造 全 新 电子 商务 平台 。 七 彩 光 年 工作 室 成 立 于 1999 
年 ， 已 经 成 为 国内 著名 的 网 站 建设 提供 商 。 ey 
的 为 中 国教 育 部 、 中 国文 化 部 、 国 有 资 监 督 管 理 委员 会 ., . . . . 
<font face=" 微 软 雅 辕 " color="#9966ee"> 我 人 诅 呈 1 


font><br> 
成 员 都 具有 多 年 的 实际 设计 工作 经 蛤 ， 更 好 
的 满足 客户 的 国际 化 需求 。 设 计 师 由 正规 关 院 毕业 ， 创 意 的 思维 模 
式 ,高 超 的 设计 技能 ， 为 您 提供 最 适合 您 的 设计 方案 。<br> 
<font face=" 微 软 雅 早 " cotor="#996666"> 我 们 的 承诺 ; < 


font><br> 

二 本人、 
用 网 上 的 任何 模 杖 ， 根 据 每 个 公司 的 行 点 ， 设 计 出 属于 客户 .<br> 
~ Se 更 多 &gti&gti</div> 


图 3-7 图 3-8 


[@E 为 页 面 中 相应 的 文字 添加 加 粗 文字 标签 <b>, 如 图 3-9 所 示 。 保 存 页 面 , 在 浏览 器 中 预览 页 面 ， 
可 以 看 到 文字 加 粗 显示 的 效果 ， 如 图 3-10 所 示 。 


<div id="title"> 团 队 合作 </div> 
<div jd="text"> 七彩 光 年 工作 室 是 专业 从 事 互 联网 相 

关 业 务 开发 的 公司 。 专 门 提供 全 方位 的 优质 服务 和 最 专业 的 网 站 建 

设 方案 为 企业 打造 全 新 电子 商务 平台 。 七 彩 光 年 工作 守成 立 于 1999 

年 ， 已 经 成 为 国内 著名 的 网 站 建设 提供 商 。 八 年 的 风雨 历程 已 成 功 

的 为 中 国教 育 部 、 中 国文 化 部 、 国 有 资 监督 管理 委员 会 . . . . . . <br /> 
<font face=" 微 软 雅 黑 " coLor="#996696"><b: 我 们 的 团队 : 


[Lhz</font><br> 
成 员 都 具有 多 年 的 交际 设计 工作 经 验 , 更 好 
的 满足 客户 的 国际 化 需求 。 设 计 师 由 正规 美 院 毕业 ， 创 意 的 思维 模 
式 ,高 超 的 设计 技能 ， 为 您 提供 最 适合 您 的 设计 方案 。<br> 
<font face=" 微 软 雅 黑 "” cotor="#996666"><b2 我 们 的 承诺 : 



































sbz</font><br> 
本 工作 室 设计 与 制作 的 网 站 均 属 原创 、 不 套 
用 网 上 的 任何 模板 ， 根 据 每 个 公司 的 行 点 ,设计 出 属于 客户 . . . . .<br> 
gti&gti</div> 
图 3-9 图 3-10 


[ 国 国 返回 网 页 HTML 代码 中 ， 为 页 面 中 相应 的 文字 添加 文字 倾斜 <i> 标签 ， 如 图 3-11 所 示 。 保 
存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 文字 倾斜 显示 的 效果 ， 如 图 3-12 所 示 。 


<div id="title"> 团 队 合作 </div> 
<div id="text"> 。 七彩 光 年 工作 室 是 专业 从 事 互联 网 相 
关 业 务 开 发 的 公司 。 专 门 提 供 全 方位 的 优质 服务 和 最 专业 的 网 站 建 
设 方案 为 企业 打造 全 新 电子 商务 平台 。 七 彩 光 年 工作 室 成 立 于 1999 
年 ， 已 经 成 为 国内 著名 的 网 站 建设 提供 商 。 作 年 的 风雨 历程 已 成 功 
的 为 中 国教 育 部 、 中 国文 化 部 、 国 有 资 监督 管理 委员 会 . . . . . . <br /> 
<font face=" 微 软 雅 黑 " cotor="#996666"><b> 我 们 的 团队 


</b></font><br> 
成 员 都 有 具有 多 年 的 实际 设计 工作 经 验 , 更 好 
的 满足 客户 的 国际 化 需求 。 设 计 师 由 正规 美 院 毕业 ,创意 的 思维 模 
式 ， 高 超 的 设计 技能 , 为 您 提供 最 适合 您 的 设计 方案 。<br> 
<font face=" 微 软 雅 黑 " coLor="#996666"><b> 我 们 的 承诺 


</b></font><br> 
“” ”本 工 作 室 设计 与 制作 的 网 站 均 属 原创 、 不 穴 
用 网 上 的 任何 模板 根据 和 不公 司 的 行 点 ， 设 计 出 属于 客户 .， .<br> 


2 更 多 &gtj&gtj<Li2</div> 
图 3-11 图 3-12 


”返回 网 页 HTML 代码 中 ， 为 页 面 中 相应 的 文字 添加 下 划 线 <u> 标签 ， 如 图 3-13 所 示 。 保 
存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 文字 添加 下 划 线 的 效果 ， 如 图 3-14 所 示 。 


<div id="title"> 团 队 合作 </div> 

<div 1d="text"> 十 彩 光 年 工作 训 是 专业 从 事 互联 
网 相关 业务 开发 的 公司 。 专 门 提供 全 方位 的 优质 服务 和 最 专业 
的 网 站 建设 方案 为 企业 打造 全 新 电子 商务 平台 。 七 彩 光 年 工作 
室 成 立 于 1999 年 ， 已 经 成 为 国内 著名 的 网 站 建设 提供 商 。 八 年 
的 风雨 历程 已 成 功 的 为 中 国教 育 部 、 中 国文 化 部 、 国 有 资 监督 
管理 委员 会 ..... . <br /> 

<font face=" 微 软 雅 黑 ”color="#996eee"><u><b> 我 们 
的 团队 : </b>x/u></font><br> 

一 ”成员 都 具有 多 年 的 交际 设计 工作 经 验 ， 

更 好 的 满足 客户 的 国际 化 需求 。 设 计 师 由 正规 美 院 毕业 ,创意 
的 思维 模式 ， 高 超 的 设计 技能 ， 为 您 提供 最 适合 您 的 设计 方案 。<br> 

<font face=" 微 软 雅 申 " color="#996e6e"><u><b> 我 们 
的 承诺 : </b><Ju></font><br> 























本 工作 室 设 计 与 制作 的 网 站 均 属 原创 、 
不 套用 网 上 的 任何 模板 ,根据 每 个 公司 的 行 点 ,设计 出 属于 客户 ... . . 
<br> 
<u><1> 更 多 &Btj&gti</1></u></div> 
</div> 











图 3-13 图 3-14 


为 了 满足 不 同 需求 ，HTML 还 有 其 他 用 来 修饰 文字 的 标签 ， 比 较 常用 的 有 上 标 格式 标签 
<sup>、 下 标 格式 标签 <sub> 和 删除 线 标签 <strike> 等 。 
其 他 文字 修饰 标签 的 基本 语法 如 下 。 


<sup> 上 标 </sup> 
<sub> 下 标 </sub> 
<strike> 删除 线 </strike> 
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如 表 3-2 所 示 为 其 他 文字 修饰 标签 的 说 明 。 


表 3-2 其 他 文字 修饰 标签 

| 说 明 

<sup> ”<sup></sup> 为 上 标 格式 标签 ， 多 用 于 数学 指数 的 表示 ， 如 某 个 数 的 平方 或 者 立方 
[CAUU | <sub></sub> 为 下 标 格式 标签 ， 多 用 于 注释 ， 以 及 数学 的 底数 表示 
<strike> <strike></strike> 为 删除 线 标签 ， 多 用 于 删除 效果 


为 文字 添加 上 标 和 删除 线 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 3 章 \3-1-5.html 。 视频 : 光盘 \ 视 频 \ 第 3 章 \3-1-5.mp4 









[GE 执行 “文件 > 打开” 命令, 打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-1-5.html”, 效果 如 图 3-15 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 HTML 代码 ， 如 图 3-16 所 示 。 








mages/31162.jpg" width= 
</div> 






6" 
<div 1d="text"><font 三 软 雅 申 ”size="+4" color=| 
"#FFFFFF"> 关 于 我 们 R< 3 

所 <font face=" 宋 体 " cotor="#FFFFFF"> 我 们 专 
关于 我 们 R 注 于 互动 视觉 设计 ， 用 户 | 让 计 的 工作 训 。 简 称 
4 STUDIO， 工 作 室 成 立 于 2814 年 初 ， 在 互动 设计 和 互动 营销 人 
域 有 着 独特 理解 我 们 一 直 专注 于 互联 网 整合 营销 传播 服务 








碑 ， 把 客户 企业 呈 入 形象 估 到 国 和 化， 并 且 实 现 商业 价 人 是 团 
队 成 立 的 本 意 ! </font></div> 

</div> 

</body> 


图 3-15 图 3-16 


国 z 为 页 面 中 相应 的 文字 添加 上 标 格式 <sup> 标签 ， 从 而 实现 上 标的 效果 ， 如 图 3-17 所 示 。 
保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 所 实现 的 上 标 效 果 ， 如 图 3-18 所 示 。 

















<div id="text"><font face=" 微 软 雅 黑 " size="+4" color= 
"#FFFFFF"> 关 于 我 们 <sup>R<Lsup2</font><br> 关于 我 人 
<font face=" 宋 体 " size="+1" color="#FFFFFF"> 我 们 专注 于 关于 我 们 
互动 视觉 设计 ， 用 户 体验 设计 的 创新 设计 工作 室 。 简 称 STUDIO， : 
工作 室 成 立 于 2814 年 初 ， 在 互动 设计 和 互动 营销 领域 有 着 独特 理 
解 。 我 们 一 直 专注 于 互联 网 整合 营销 传播 服务 ， 以 客户 品牌 形象 为 
重 ， 提 供 精 确 的 策划 方案 与 视觉 设计 方案 ， 团 队 整 体 有 着 国际 化 意 
识 与 前 瞻 思 想 ， 以 视觉 设计 创意 带动 客户 品牌 提升 ， 洞 察 互联 网 发 
展 趋势 。 建 立 更 好 的 网 络 形象 与 口碑 ， 把 客户 企业 品牌 形象 做 到 国 
际 化 ， 全 所 </font></div> 


图 3-17 图 3-18 


国 3 畏 ”返回 网 页 HTML 代码 中 , 为 页 面 中 相应 的 文字 添加 删除 线 <strike> 标签 , 如 图 3-19 所 示 。 
保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 文字 添加 删除 线 的 效果 ， 如 图 3-20 所 示 。 














@@24 








<div id="text"><font face=" 徽 软 雅 黑 " size="+4" color= 
"#FFFFFF"> 关 于 我 们 <sup>R</sup></font><br> 
<font face=" 宋 体 " size="+1"” color="#FFFFFF"> 我 们 专注 于 
互动 视觉 设计 ， 用 户 体验 设计 的 创新 设计 工作 主 。<stcikes 简 称 
Ss 工作 室 成 立 于 2914 年 初 ， < :在 互动 设计 和 互动 营销 


意 带动 客户 品牌 提升 
， 洞 察 互 联网 发 展 趋势 。 建 立 更 好 的 网 络 形象 与 口碑 ， 把 客户 企业 
品牌 形象 依 到 国际 化 ， 并 且 实 现 商 业 价值 是 团队 成 立 的 本 意 ! </font></ 
div> 














图 3-19 





网 页 中 文字 的 排版 很 大 程度 上 决定 了 一 个 网 页 是 否 美观 。 对 于 网 页 中 的 大 段 文字 ,通常 采用 分 段 、 
分 行 和 加 空格 等 方式 进行 规划 。 本 节 从 段落 的 细节 设置 入 手 ， 使 读者 学 习 后 能 利用 标签 轻松 自如 地 规 
划 文 字 的 排版 。 


HTML 标签 中 最 常用 的 标签 是 段落 标签 <p>， 这 个 标签 非常 简单 ， 但 是 却 非常 重要 ， 因 为 这 是 
一 个 用 来 划分 段落 的 标签 ， 几 乎 在 所 有 网 页 中 都 会 用 到 。 
<p> 标签 的 基本 语法 如 下 。 


<p> 段落 文字 </p> 





当 文 字 到 达 浏 览 器 的 边界 后 将 自动 换行 ， 但 是 当 调 整 浏览 器 的 宽度 时 ， 文 字 换行 的 位 置 也 相应 发 
生变 化 ， 格 式 就 会 显得 混乱 ， 因 此 在 网 页 中 添加 换行 标签 是 必要 的 。 换 行 标签 的 基本 语法 如 下 。 


<br> 
在 网 页 中 如 果 某 一 行 的 文本 过 长 ， 浏 览 器 会 自动 对 这 行文 字 进行 换行 ， 如 果 想 取消 浏览 器 的 


换行 处 理 ， 可 以 使 用 <nobr> 标签 来 禁止 自动 换行 ， 该 标签 是 成 对 出 现 的 ， 有 开始 标签 就 有 结束 
标签 。 


为 网 页 中 的 文本 进行 分 段 和 分 行 处 理 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 3 章 \3-2-2.html 。 视频 : 光盘 \ 视 频 \ 第 3 章 \3-2-2.mp4 


[GE 执行 “文件 > 打开 ”命令 ,打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-2-2.html”, 效果 如 图 3-21 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 HTML 代码 ， 如 图 3-22 所 示 。 
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<body> 
<div id="box"> 

<div id="logo"><img src="images/32262.jpg" width= 
"138" height="36" alt=""/></div> 

<div id="text"><font class="fonte1"> 关 于 我 们 </font> 我 
们 专注 于 互动 视觉 设计 ， 用 户 体验 设计 的 创新 设计 工作 室 。 简 
称 sTUDIO， 工 作 室 成 立 于 2614 年 初 ， 在 互动 设计 和 互动 营销 领 
域 有 着 独特 理解 。 我 们 一 直 专 注 于 互联 网 整合 营销 传播 服务 ， 
以 客户 品牌 形象 为 重 ， 提 供 精确 的 策划 方案 与 视觉 设计 方案 ， 
整体 有 着 国际 化 意识 与 前 瞻 思 想 ; 以 视觉 设计 创意 带动 客户 品 
牌 提升 ， 洞 察 互联 网 发 展 趋势 。 建 立 更 好 的 网 络 形象 与 口碑 ， 
把 客户 企业 总 析 形 象 做 到 国际 化 ， 并 且 实现 商业 价值 是 团队 成 立 的 本 意 
1 </div> 
</div> 
| </body> 


图 3-21 图 3-22 


[IgE 为 页 面 中 相应 的 文本 添加 <p> 标签 进行 分 段 ， 如 图 3-23 所 示 。 保 存 页 面 ， 在 浏览 器 中 预览 
页 面 ， 可 以 看 到 为 文本 进行 分 段 的 效果 ， 如 图 3-24 所 示 。 




















<div id="logo"><img src="images/32262.jpg" width= 
"138" height="36" alt=""/></div> 
<div id="text"><p><font class="font91"> 关 于 我 们 </font> 


</p> 
2 > 我 们 专注 于 互动 视觉 设计 ， 用 户 体验 设计 的 创新 设计 
工作 二 简称 STupI0， 工作 语 成 立 于 2614 年 初 ， 在 互动 设计 和 
互动 营销 领域 有 着 独特 理解 。</p><p> 我 们 一 直 专 注 于 互联 网 整合 
营销 传 擂 服 务 ， 以 客户 品牌 形 月 为 重 ， 提 供 精确 的 策划 方案 与 
视觉 设计 方案 ， 整 体 有 着 国际 化 意识 与 前 瞻 思 想 ， 以 视觉 设计 
创意 带动 客户 品牌 提升 ， 洞 察 互联 网 发 展 趋势 。 建 立 更 好 的 网 

络 形象 与 口碑 ， 把 客户 企业 品牌 形象 做 到 国际 化 ， 并 且 实 现 商 

业 价 值 是 团队 成 立 的 本 意 ! </p></div> 














</div> 
</body> 
图 3-23 图 3-24 
在 网 页 中 使 用 <p> 标签 对 网 页 文本 内 容 进行 分 段 处 理 ， 默 认 情况 下 ， 段 落 与 段 
落 之 间 会 有 一 点 空隙 ， 便 于 用 户 区 分 不 同 的 段落 。 


[一 返 回 网 页 HTML 代码 中 ， 在 页 面 中 的 相应 位 置 输入 换行 标签 ， 如 图 3-25 所 示 。 保 存 页 面 ， 
在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 文本 进行 换行 处 理 的 效果 ， 如 图 3-26 所 示 。 


<body> 
<div id="box"> 

<div 1d="logo"><img src="images/32262.jpg" width= 
"138" height="36" alt=""/></div> 

<div id="text"><p><font class="fonte1"> 关 于 我 们 </font> 
</p> 

<p> 我 们 专注 于 互动 视觉 设计 ， 用 户 体验 设计 的 创新 设计 
工作 室 。 简 称 STUDIO， 工 作 宣 成 立 于 2614 年 初 ， 在 互动 设计 和 
互动 营销 领域 有 着 独特 理解 。</p><p> 我 们 一 直 专 注 于 互联 网 整合 
营销 传播 服务 ， 以 客户 品牌 形象 为 重 ， 提 供 精确 的 策划 方案 与 
视觉 设计 方案 ， 整 体 有 着 国际 化 意识 与 前 瞻 思 想 ;<br> 以 视觉 设计 创 
意 带 动 客户 品牌 提升 ， 洞 察 互联 网 发 展 趋势 。 建 立 更 好 的 网 络 
形象 与 口碑 ， 把 客户 企业 品牌 形象 做 到 国际 化 ， 并 且 实 现 商业 
价值 是 团队 成 立 的 本 意 ! </p></div> 
</div> 
</body> 























图 3-25 








Gs 


<br> 标签 是 一 个 单 标签 ， 也 叫 空 标签 ， 不 包含 任何 内 容 ， 在 HTML 代码 的 任 
意 位 置 添 加 了 <br> 标签 ， 当 网 页 在 浏览 器 中 显示 时 ， 该 标签 之 后 的 内 容 将 会 在 下 一 
行 显示 。 








标题 是 网 页 中 不 可 缺少 的 一 个 元 素 ， 为 了 体现 标题 的 重要 性 ， 标 题 的 样式 一 般 比 较 特殊 。HTML 
技术 保存 了 一 套 针对 标题 的 样式 标签 ， 按 照 文 字 尺 寸 从 大 到 小 排列 分 别 是 从 <h1> 到 <h6>。 标 题 标 
签 的 基本 语法 如 下 。 


<hx> 这 是 标题 </hx> 


这 里 的 x 为 数字 从 1 到 6，<hx> 标签 用 于 设置 文章 的 标题 ， 标 题 标签 的 特点 是 独占 一 行 和 文字 
加 粗 。 设 计 网 页 的 时 候 可 以 根据 标题 的 等 级 来 选择 合适 的 标题 ， 并 设置 多 级 标题 。 
设置 文本 标题 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 3 章 \3-2-3.html 视频 ; 光盘 \ 视 频 \ 第 3 章 \3-2-3.mp4 


[GE 执行 “文件 > 打开 ”命令 ,打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-2-3.html”, 效果 如 图 3-27 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 HTML 代码 ， 如 图 3-28 所 示 。 





<div id="text"> 标 题 1<br> 
标题 2<br> 

标题 3<br> 

标题 4<br> 

标题 5<br> 

标题 6 

</div> 

图 3-27 图 3-28 


葬 3 本 为 页 面 中 相应 的 文字 分 别 添加 标题 标签 <h1> 至 <h6>， 如 图 3-29 所 示 。 保 存 页 面 ， 在 浏 
览 器 中 预览 页 面 ， 可 以 看 到 各 标题 文字 的 效果 ， 如 图 3-30 所 示 。 

















本 id="text"><hl> 标 题 1</hl><br> 
sb22 标 题 2</h2><br> 

pr er Di 

4 标题 42/h4><br> 

<h5> 标 题 5</h5><br> 

[mn6> 标 题 6</h6> 


(Saiv> 














图 3-29 图 3-30 
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在 HTML 页 面 中 ， 通 过 <h1> 至 <h6> 标签 定义 页 面 中 的 文字 为 标题 文字 ， 可 
以 通过 CSS 样式 分 别 设置 h1 至 h6 标签 的 CSS 样式 ， 从 而 修改 <h1> 至 <h6> 标 
签 在 网 页 中 显示 的 效果 。 





HTML 提 供 了 修饰 用 的 水 平分 割 线 ， 在 很 多 场合 中 可 以 轻松 使 用 ， 不 需要 另外 作 图 。 同 时 可 以 在 
HTML 中 为 水 平 线 添 加 颜色 、 大 小 、 粗 细 等 属性 。 
<hr> 标签 的 基本 语法 如 下 。 


<hr> 


在 网 页 中 输入 一 个 <hr> 标签 ， 就 添加 了 一 条 默认 样式 的 水 平 线 ， 且 在 页 面 中 占据 一 行 。 
标签 <hr> 有 多 种 属性 ， 常 用 的 属性 有 width、size、align、color 和 title， 分 别 可 以 设置 水 平 
线 的 宽度 、 高 度 、 对 齐 方 式 和 光标 悬 停 在 分 割 线 上 时 出 现 的 内 容 提 示 。 


在 网 页 中 插入 水 平 线 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 3 章 \3-2-4.html 。 视频 : 光盘 \ 视 频 \ 第 3 章 \3-2-4.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-2-4.html”, 效果 如 图 3-31 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 HTML 代码 ， 如 图 3-32 所 示 。 


MI we 本 


欢迎 进入 卡通 像素 王国 


Ch <body> 
<div id="top"> 欢 迎 进 入 卡通 像素 王国 </div> 


<div id="pic"><img src="images/32501.jpg" width="1926" 
height="468"” alt="" /></div> 
ws (</body> 


图 3-31 图 3-32 


页 。 在 网 页 中 标题 文字 之 后 添加 <hr> 标签 , 并 对 相关 属性 进行 设置 , 如 图 3-33 所 示 。 保存 页 面 ， 
在 浏览 器 中 预览 页 面 ， 可 以 看 到 所 添加 的 水 平 线 效果 ， 如 图 3-34 所 示 。 














欢迎 进入 卡通 像 罕 王国 





<body> 
<div id="top"> 欢 迎 进入 卡通 像素 王国 

<hr width="566px"_ size="2" align="center" coLor="#636">| 
</Jdiv> 

<div id="pic"><img src="images/32561.jpg" width="1626" 
height="468" alt="" /></div> 

</body> 














图 3-33 图 3-34 


默认 的 水 平 线 是 空心 立体 的 效果 ， 可 以 在 水 平 线 标签 <hr> 中 添加 noshade 属 
性 ，noshade 是 布尔 值 的 属性 ， 如 果 在 <hr> 标签 中 添加 该 属性 ， 则 浏览 器 不 会 显 
示 立 体形 状 的 水 平 线 ， 反 之 如 果 不 添 加 该 属性 ， 则 浏览 器 默认 显示 一 条 立体 形状 带 
有 阴影 的 水 平 线 。 





段落 文字 在 不 同 的 时 候 需要 不 同 的 对 齐 方式 ， 默 认 的 对 齐 方式 是 左 对 齐 。<p> 标签 的 对 齐 属 性 为 
align，align 属性 的 基本 语法 如 下 。 


align= " 对 齐 方式 四 


align 属性 需要 设置 在 段落 或 其 他 标签 中 ， 通 过 设置 align 属性 为 left、right 或 center 值 实现 左 
对 齐 、 右 对 齐 和 居中 对 齐 。 


设置 网 页 文本 的 对 齐 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 3 章 \3-2-5.html 。 视频: 光盘 \ 视 频 \ 第 3 章 \3-2-5.mp4 


[GE 执行 “文件 > 打开 ”命令 ,打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-2-5.html”, 效果 如 图 3-35 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 HTML 代码 ， 如 图 3-36 所 示 。 


雇 迎 进入 卡通 像 察 王国 








<body> 
<div id="top"> 欢 迎 进入 卡通 像素 王国 

<hr width="566px" size="2" align="center" color="#036"| 
</div> 
<div id="pic"><img src="images/32501.jpg" width="1020" 
height="468" alt="" /></div> 
- 四 </body> 











图 3-35 图 3-36 


[到 在 页 面 的 <div> 标签 中 添加 align 属性 设置 ,如 图 3-37 所 示 。 保 存 页 面 , 在 浏览 器 中 预览 页 面 ， 
可 以 看 到 文字 水 平 居 右 对 齐 的 效果 ， 如 图 3-38 所 示 。 


欢迎 进入 卡通 像 家 王国 





<body> 
<div id="top"_align="right"> 欢 迎 进入 卡通 像素 王国 

<hr width="S00px" size="2" align="center" cotor="#636"| 
</div> 
<div id="pic"><img src="images/32501.jpg" width="1626" 
height="468" alt="" /></div> 
</body> 














图 3-37 图 3-38 
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[ 国 国 ”返回 代码 视图 中 ， 修 改 刚 添加 的 align 属性 的 属性 值 ， 如 图 3-39 所 示 。 保 存 页 面 ， 在 浏览 
器 中 预览 页 面 ， 可 以 看 到 文字 水 平 居中 对 齐 的 效果 ， 如 图 3-40 所 示 。 


欢迎 进入 卡通 像素 王国 





<body> 
<div jd="top'" aljgn="csnter"> 欢 迎 进入 卡通 像素 王国 

<hr width="566px"” size="2" align="center" color="#036"> 
</div> 
<div id="pic"><img src="images/32561.jpg"” width="1626" 
height="468" alt="" /></div> 
</body> 














图 3-39 


列表 形式 在 网 页 设计 中 占有 比较 大 的 比例 ， 它 的 特点 是 显示 信息 非常 整齐 、 直 观 ， 便 于 用 户 理解 。 
在 本 节 中 将 向 读者 介绍 HTML 中 用 于 创建 项 目 列表 、 编 号 列表 和 定义 列表 的 相关 标签 。 


HTML 的 列表 元 素 是 一 个 由 列表 标签 封闭 的 结构 , 包含 的 列表 项 由 <li></li> 组 成 。 具体 结构 如 下 。 





列表 开始 
列表 项 开始 <1i> 
列表 项 具体 内 容 
列表 项 介绍 </1i> 
列表 结束 


项 目 列表 又 称 为 无 序列 表 ， 就 是 列表 结构 中 的 列表 项 没有 先后 顺序 的 列表 形式 。 不 少 网 页 应 用 中 
的 列表 均 采 用 项 目 列表 。 

项 目 列表 标签 采用 <ul></ul> 标签 ， 每 一 个 列表 项 被 包含 在 <li></li> 标签 内 ， 所 有 的 列表 项 被 
包含 在 <ul></ul> 标签 内 。 

项 目 列表 的 语法 格式 如 下 。 


<ul> 
<1i> 列表 项 一 </1i> 
<1i> 列表 项 二 </1i> 
<1i> 列表 项 三 </1i> 
<1i> 列表 项 四 </1i> 
<1i> 列表 项 五 </1i> 


</u1> 


QQ 


制作 新 闻 列 表 
最 终 文 件 : 光盘 \ 最 终 文件 \ 第 3 章 \3-3-1.html 。 视频 : 光盘 \ 视 频 \ 第 3 章 \3-3-1.mp4 


[GE 执行 “文件 > 打开” 命令, 打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-3-1.html”, 效果 如 图 3-41 
所 示 。 将 光标 移 至 名 为 box 的 Div 中 ， 将 多 余 的 文字 删除 ， 并 输入 相应 的 文字 ， 如 图 3-42 所 示 。 








显示 id "box" 的 内 容 杭州 儿童 食用 合 碘 盐 平均 智商 提高 4.72 
北京 推行 公交 “让 座 日 ”活动 

测控 数据 良好 逮 妖 一 号 或 推迟 撞击 月 球 
苏州 今年 将 新 修 公 路 千 余 公 里 

安全 专家 :社交 网 站 滋生 网 络 攻击 的 温床 
北京 多 次 散发 小 广告 者 可 被 芳 教 





[EE ”转换 到 网 页 HTML 代码 中 ， 为 刚 输入 的 内 容 添加 相应 的 项 目 列表 标签 ， 如 图 3-43 所 示 。 保 
存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 网 页 中 项 目 列表 的 效果 ， 如 图 3-44 所 示 。 





Kdiv id="box"> 





| 热点 新 闻 














<UL> 
<1i> 行 公交 “ii ”活动 </1i> ee 
< > 测控 数据 良好 。 录 一 号 或 撞击 月 球 </1i | | ne en 
<1i1>: 家 :社交 网 站 滋生 网 络 攻击 的 温床 </1i> en 
<11> 北 京 多 次 散发 小 广告 者 可 被 劳教 </11> EE 
< 人 > 2 
</div> 
图 3-43 图 3-44 






= 默认 情况 下 ， 在 网 页 中 创建 的 项 目 列表 显示 为 实心 小 圆 点 的 形式 ， 可 以 通过 
提示 在 <ul> 标签 中 添加 type 属性 ， 修 改 项 目 符号 的 效果 ， 例 如 在 <ul> 标签 中 添加 
ER type= "” square" 属性 设置 ， 可 以 将 项 目 符 号 修改 为 实心 正方 形 。 


编号 列表 又 称 有 序列 表 ， 就 是 列表 结构 中 的 列表 项 有 先后 顺序 的 列表 形式 ， 从 上 到 下 可 以 有 不 同 
的 序列 编号 ， 如 1、2、3… 或 者 a、b、c… 等 。 

编号 列表 采用 标签 <ol></ol>， 每 一 个 列表 项 被 包含 在 <li></li> 标签 内 ， 所 有 的 列表 项 被 包含 在 
<ol></ol> 标签 内 。 使 用 编号 列表 可 以 让 列表 项 按照 明确 的 顺序 排列 。 

编号 列表 的 语法 规则 如 下 。 


31 四 


<ol> 
<1i> 列表 项 一 </1i> 
<1i> 列表 项 二 </1i> 
<1i> 列表 项 三 </1i> 
<1i> 列表 项 四 </1i> 
<1i> 列表 项 五 </1i> 


</o1> 
制作 编号 有 序列 表 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 3 章 \3-3-2.html ”视频 : 光盘 \ 视 频 \ 第 3 章 \3-3-2.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-3-2.html”, 效果 如 图 3-45 
所 示 。 将 光标 移 至 名 为 news 的 Div 中 ， 将 多 余 的 文字 删除 ， 并 输入 相应 的 文字 ， 如 图 3-46 所 示 。 


煤 淡 石油 ; 天 然 气 发 展 “ 十 二 五 ”规划 出 台 
西 气 东 栓 引入 四 大 气 源 保障 多 省 份 供 气 安全 





图 3-45 图 3-46 


到 王 。 转换 到 代码 视图 中 ， 为 刚 输入 的 内 容 添 加 相应 的 编号 列表 标签 ， 如 图 3-47 所 示 。 保 存 页 面 ， 
在 浏览 器 中 预览 页 面 ， 可 以 看 到 网 页 中 编号 列表 的 默认 效果 ， 如 图 3-48 所 示 。 





<div id="news"> 
<OL> 
“1i> 集 团 公司 副 总 经 理 到 银川 大 学 调研 慰问 </11> 
<11> 大 酒店 员工 荣获 全 国 无 偿 献血 奉献 奖 银 </1i> 
<11> 集 团 公司 荣获 2615 年 度 纳税 贡献 奖 </11> 
<11 > 我国 天 然 气 储备 建设 任重道远 </11> 
<11> 房 价 持续 回升 显 暖 意 房 企 年 初 进入 “忙碌 时 ”</1i> 
<11> 页 岩 气 商业 化 : 理想 与 现实 的 差距 </1i> 
<11i> 煤 痰 石油 : 天 然 气 发 展 < 十 二 五 ”规划 出 台 </1i> 
<1i> 西 气 东 输 引入 四 大 气 源 保 障 多 省 份 供 气 安全 </1j> 
</ol> 
</aiv> 
































图 3-47 


G2 





默认 情况 下 ， 在 网 页 中 的 有 序列 表 <ol> 标签 中 的 项 目 会 显示 为 1、2、3… 进 行 

排列 ， 如 果 需 要 修改 默认 的 有 序列 表 序号 ， 可 以 在 <ol> 标签 中 添加 type 属性 设置 。 
例如 ， 在 <ol> 标签 中 添加 type= " a " 属性 设置 ， 可 以 将 有 序列 表 的 序号 设置 为 小 
写字 母 a、b、c… 的 形式 。 


列表 的 另外 一 种 形式 是 定义 列表 ， 定 义 列表 形式 特别 ， 用 法 也 特别 ， 定 义 列 表 中 每 个 标签 都 是 成 
对 出 现 的 ， 它 在 网 页 布局 中 的 应 用 也 非常 广泛 。 

定义 列表 由 <dl>、<dt> 和 “<dd>3 个 标签 组 成 ，<dt> 和 <dd> 标签 包含 在 <dl> 标签 内 ， 不 同 
的 是 标签 <dt></dt> 定义 的 是 标题 ， 而 标签 <dd></dd> 定义 的 是 内 容 。 

定义 列表 的 语法 规则 如 下 。 


<dl> 
<dt></dt> 
<dd></dd> 


</dl> 
制作 复制 的 新 闻 列 表 
最 终 文件 : 光盘 \ 最终 文件 \ 第 3 章 \3-3-3.html ”视频 : 光盘 \ 视 频 \ 第 3 章 \3-3-3.mp4 


[GE 执行 “文件 > 打开 ”命令 ,打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-3-3.html”, 效果 如 图 3-49 
所 示 。 将 光标 移 至 名 为 news 的 Div 中 ， 在 相应 四 如 图 3-50 所 示 。 


集团 公司 副 总 经 理 到 银川 大 学 滑 研 入 问 10-02 
大 酒店 员工 荣 区 全 国 无 停 献血 三 献 奖 银 10-02 
集团 公司 荣 区 2015 年 度 纳税 贡献 奖 09-30 


我 国 天 然 气 储备 建设 任重道远 09-29 
房价 持续 回升 呈 瑟 意 房 企 年 初 进入 “忙碌 时 ”09-28 
页 涯 气 商业 化 : 理 巷 与 现实 的 差距 09-28 
烧 央 石油 : 天 然 气 发 展 “ 十 二 五 ”规划 出 台 爆 央 石油 : 天 然 气 发 展 “ 十 二 五 ”规划 出 台 09-28 
西 气 东 输 引入 四 大 气 源 保 障 多 省份 供 气 安全 盏 气 车 给 引入 四 大 气 源 保障 多 省 份 供 气 安全 09-28 





图 3-49 图 3-50 


E@2 王 ”转换 到 代码 视图 中 ， 可 以 看 到 该 部 分 内 容 的 HTML 代码 ， 如 图 3-51 所 示 。 在 页 面 中 将 
<div id= "news "></div> 标签 之 间 相应 的 项 目 列表 标签 删除 ， 添 加 定义 列表 标签 <dl>、<dt> 和 
<dd>， 如 图 3-52 所 示 。 
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<div jd="news"> <div Td="news™> 
<ub> db 
.11 集团 公司 副 半 经 理 到 银 咱 大 学 调研 则 问 16-e2</1Li> <dt> 集 团 公司 副 总 经 理 到 银川 大 学 调研 慰问 </dt><dd>16-62</dd> 
<1i> 大 酒店 员工 荣获 全 国 无 偿 献 血 替 献 奖 银 16-62</11> <dt> 大 酒店 员工 荣获 全 国 无 偿 献 血 奉献 奖 银 </dt><dd>186-62</dd> 
<11> 集 团 公司 荣获 2615 年 度 纳税 贡献 奖 69-36</1i> <dt> 集 团 公司 荣获 2615 年 度 纳税 贡献 奖 </dt><dd>69-36</dd> 
<11> 我 国 天 然 气 储备 建设 任重道远 eg-29</1i> <dt> 我 国 天 然 气 储备 建设 任重道远 </dt><dd>e9-29</dd> 
<11> 房 价 持续 回升 显 暖 意 房 企 年 初 进入 忙碌 时 "69-28</1i>| <dt> 房 价 持续 回 升 显 暖 意 房 企 年 初 进入 “忙碌 时 "</dt><dd>g9-28</dd> 
<11> 页 岩 气 商 业 化 : 理想 与 现实 的 差距 69-28</11> <dt> 页 岩 气 商业 化 : 理想 与 现实 的 差距 </dt><dd>69-28</dd> 
<11> 煤 卖 石油 : 天 然 气 发 展 < 十 二 五 "规划 出 台 e9-28</1i> <dt> 煤 亦 石 油 : 天 然 气 发 展 < 十 二 五 "规划 出 台 </dt><dd>e9-28</dd> 
<11> 西 气 东 输 引入 四 大 气 源 保障 多 省 份 供 气 安全 69-28</1i> <dt> 西 气 东 输 引入 四 大 气 源 保障 多 省 份 供 气 安全 </dt><dd>e9-28</dd> 
</ut> Ld 
</div> </div> 
图 3-51 图 3-52 


[ 国 于 因为 <dl>、<dt> 和 <dd> 标签 的 默认 效果 并 不 能 满足 这 里 制作 的 效果 ， 需 要 定义 相应 的 
CSS 样式 对 其 进行 控制 ， 如 图 3-53 所 示 。 保 存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 网 页 中 定义 
列表 的 效果 ， 如 图 3-54 所 示 。 


news dt { 
width: 258px; 
height: 24px; 
Uine-height: 24px; 
border -bottom: dashed lpx #699; 
background-image: url(../images/33301.png)’; 
background-repeat: no-repeat; 
background-position: left center; 
padding-left: 15px; 
float: left; 





} 

news dd { 
width: 60px; 
height: 24px; > Deol mm 
Vine-height: 24px; ， 类 兴 石 四 天 着 间 展 “十 二 五 ” 观 圳 上台 
border-bottom; dashed lpx #699; 元 和 光 引 入 EE 大 忆 天 有 则 多 省 人 外 忆 安全 
text-align: right; 
float: left; 














图 3-53 图 3-54 


在 HTML 代码 中 ,<dt> 和 <dd> 标签 都 是 块 元 素 , 在 网 页 中 占据 一 整 行 的 空间 ， 
如 果 需 要 使 用 <dt> 与 <dd> 标签 中 的 内 容 在 一 行 中 显示 ， 就 必须 使 用 CSS 样式 进 
行 控 制 。 关 于 CSS 样式 将 在 后 面 的 章节 中 进行 详细 介绍 。 





图 片 作为 网 页 元 素 的 组 成 部 分 ， 在 今天 的 网 页 设计 中 发 挥 着 越 来 越 大 的 作用 。 本 节 将 学 习 如 何 控 
制图 片 在 网 页 中 的 显示 。 


有 了 图 像 文 件 后 ， 就 可 以 使 用 <img> 标签 将 图 像 插 入 到 网 页 中 ， 美 化 页 面 。 
<img> 标签 的 基本 语法 如 下 。 








图 像 文 件 的 地 址 "height= 
宽度 " alt=" 提示 文字 的 内 容 " /> 


图 像 的 高 度 " width=" 图 像 的 宽度 " border=" 图 像 边 框 的 


<img src=' 


@a4 





<img> 标签 的 相关 属性 说 明 如 表 3-3 所 示 。 


表 3-3 <img> 标签 的 相关 属性 

说 明 
[SA 用 于 设置 图 像 文件 所 在 的 路 径 ， 图 像 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 
[Ran 本 时 | 用 于 设置 图 像 的 高 度 
Va 而 于 是 用 于 设置 图 像 的 完 度 
| 用 于 设置 图 像 的 边框 ，border 属性 的 单位 是 像素 ， 值 越 大 边框 越 宽 。 不 推荐 使 用 图 像 的 
border 属性 ， 但 是 所 有 的 主流 浏览 器 都 支持 该 属性 


| 用 于 指定 蔡 代 文本 ， 在 图 像 无 法 显示 或 者 用 户 禁用 图 像 显 示 时 ， 代 车 图 像 显 示 在 浏览 器 
中 的 内 容 





在 网 页 中 插入 图 像 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 3 章 \3-4-1.html 。 视频 : 光盘 \ 视 频 \ 第 3 章 \3-4-1.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-4-1.html”, 效果 如 图 3-55 





图 3-55 图 3-56 
转换 到 网 页 的 HTML 代码 中 , 在 id 名 称 为 pic1 的 <div> 与 </div> 标 签 之 间 添加 <img> 标 签 ， 


并 在 该 标签 中 添加 相应 的 属性 设置 ， 如 图 3-57 所 示 。 返 回 网 页 设计 视图 中 ， 可 以 看 到 在 该 Div 中 所 
插入 的 图 像 效 果 ， 如 图 3-58 所 示 。 





<div 1d="box"> 
sdiv id="picl'z<j 





"sa" ET 


<div id="pic2"> 此 处 显示 1d "pic2" 的 内 容 </div> 

<div id="pic3"> 此 处 显示 “id "pic3" 的 内 容 </div> 

<div id="pic4"> 此 处 显示 。id "pic4" 的 内 容 </div> 
</div> 














图 3-57 图 3-58 


辐 5 ”使 用 相同 的 制作 方法 , 可 以 在 其 他 的 Div 中 添加 <img> 标签 , 在 网 页 中 插入 图 像 , 如 图 3-59 
所 示 。 保 存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 在 网 页 中 所 插入 的 图 像 效 果 ， 如 图 3-60 所 示 。 
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<div id="box"> 
<div icl 





src="images/34163.jpg" width="375"” | | 国 
></div> 
Src="images/34104. 














</div> 








在 网 页 中 插入 图 像 时 ， 可 以 只 设置 图 像 的 路 径 地址 ， 在 浏览 器 中 预览 该 网 页 时 ， 
国 浏览 器 会 按照 该 图 像 的 原始 尺寸 在 网 页 中 显示 图 像 。 如 果 在 网 页 中 需要 控制 所 插入 
的 图 像 大 小 尺寸 ， 则 必须 在 <img> 标签 中 设置 宽度 和 高 度 属性 。 





当 图 片 和 文字 在 一 起 时 ， 可 以 通过 HTML 代码 设置 图 文 混 排 。<img> 标签 的 align 属性 定义 了 
图 像 相 对 于 周围 元 素 的 水 平和 垂直 对 齐 方式 。 
图 文 混 排 的 语法 规则 如 下 。 


<img src=" 图 像 文件 的 地 址 " align=" 对 齐 方 式 " /> 


通过 align 属性 来 控制 带 有 文字 包围 的 图 像 的 对 齐 方 式 ，align 属性 的 相关 属性 值 说 明 如 表 3-4 
所 示 。 


表 3-4 align 属性 的 相关 属性 值 
说 明 










四 
align="top LU 图 像 顶 部 和 同行 文本 的 最 高 部 分 对 齐 

lon="migdle" | 图 像 中 部 和 同行 文本 的 基线 对 齐 ( 通常 为 文本 基线 ， 并 不 是 实际 的 中 部 ) 
lon="6ot6m" | 图 像 底部 和 同行 文本 的 底部 对 齐 

lagna"ieft 时 使 图 像 和 左边 界 对 齐 (文本 环绕 图 像 ) 

lalign="iight" | 使 图 像 和 右边 界 对 齐 ( 文本 环绕 图 像 ) 

align="absmiddle"” 








像 中 部 和 同行 文本 的 中 部 绝对 对 齐 


制作 图 文 介绍 页 面 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 3 章 \3-4-2.html 。 视频 : 光盘 \ 视 频 \ 第 3 章 \3-4-2.mp4 


[GE 执行 “文件 > 打开 ”命令 ,打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-4-2.html”, 效果 如 图 3-61 
所 示 。 转 换 到 网 页 的 HTML 代码 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 3-62 所 示 。 


@a6 








<div d="main"> 网 站 首页 cepan>|< /span> 关 于 我 们 <span> |</span> 服 务 

| 玉 名 cspan>| /spam> 公 司 素 食 <spanz |</span: 论 坛 空 闻 spanz|</span> 
A 

a es 





， 沉默 了 
[， 这 世间 谁 双人 除 谁 生生世世 ， 和 相通 ， 
是 和 辐 时 ， 应 雇 珍 惜 征 此 。 一 如 疗 子 来 时 ， 听 它 ， 日 日 在 麻 下 姑 啼 
1 轻盈 《了 ,把 那 美好 的 回 面 ， 记 在 心里 ， 便 不 负 这 一 符 真 相 明 光阴 。 


区 2 元 事 ， 区 远 二 eT 











民 当 柔 ， 和 和 至 交 大 
| 各 中 一 个 一 十 光阴 一 寸 心 ,一 休 县 拉 一 休 云 ， 一 外 雪花 一 朵 梦境 ， 
| 二 粒 尘 埃 一 车 提 ， 一 叶 一 草 一 片 情 ， 君 不 见 ， 伊 人 已 把 它 一 一 持 在 手 
| 量 心 * 于 忆 拓 同 ， 给 蓝天 白云 ， 未 几 个 连 拍 ， 把 美好 定格 。</p> 
ydiv> 

<jbedy> 














图 3-61 图 3-62 


[EE 在 网 页 的 大 段 文 本 中 添加 <img> 标签 ， 插 入 需要 绕 排 的 图 像 ， 如 图 3-63 所 示 。 保 存 页 面 ， 
在 浏览 器 中 预览 页 面 ， 可 以 看 到 在 文本 中 插入 图 像 的 显示 效果 ， 如 图 3-64 所 示 。 








alt= 日 可 
三 ， 可 下 在 指 上 的 光 已 发 白 ， 秋 情 情 把 太阳 的 雪 情 ， 只 留 淡然 
的 光线 。 不 知 何 时 ， 榴 下 的 薰 子 已 南 飞 ， 只 箱 宝 空 的 巢 ， 一 切 都 安 
静 了 ,沉默 了 。 其 实 ， 这 世间 谁 又 能 陪 谁 生生 世 世 ,不 过 是 借 一 段 
光阴 ， 恰 好 相遇 。 只 是 相遇 时 ， 应 该 珍惜 逢 此 。 一 如 燕子 来 时 , 听 
它 , 日 日 在 廊下 妖 嘟 ， 看 它 ， 轻 蛋 飞 行 ， 把 那 美 好 的 画面 ， 记 在 心 
里 ， 便 不 负 这 一 春 夏 相遇 光阴 。</p> 


图 3-63 图 3-64 


[国王 返回 网 页 的 HTML 代码 中 ， 在 刚刚 添加 的 <img> 标签 中 添加 align 属性 设置 ， 实 现 文本 绕 
图 效果 ， 如 图 3-65 所 示 。 保 存 页面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 在 网 页 中 实现 的 文本 绕 图 效果 ， 
如 图 3-66 所 示 。 














<div id="text"> 
<img src="images/34263.]j , width="366" height="225" 


alt="" align="right"/><p: ， 那 风 吹 来 时 ， 有 了 丝 丝 凉 
Ps aN 
洗 去 ， 只 留 淡然 的 光线 。 不 知 何 时 ， 检 下 的 划 了 已 南 飞 ， 只 利 宁 空 
的 巢 ， 一 切 部 安静 了 ,沉默 了 。 其 实 ， 这 世间 准 又 能 院 淮 生生 世 世 

， 不 过 是 佛 一 段 光阴 ， 属 好 相遇 。 只 征 相遇 时 ， 应 该 珍 异 彼此 。 一 
如 曲子 来 时 ， 听 它 ， 白 日 在 遍 下 刀 喀 ， 看 它 ， 轻 且 飞行 ， 把 那 美好 
的 夯 曾 ， 记 在 心里 ， 便 不 负 这 一 者 夏 相遇 光阴 。</p> 


图 3-65 
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在 网 页 中 ， 可 以 通过 在 <img> 标签 中 设置 align 属性 实现 图 文 混 排 效 果 ， 可 以 
通过 hspace 属性 设置 图 像 的 水 平 边 距 ， 通 过 vspace 属性 设置 图 像 的 垂直 边 距 。 





超 链接 是 网 页 中 最 重要 、 最 根本 的 元 素 之 一 ， 是 从 一 个 网 页 或 文件 到 另 一 个 网 页 或 文件 的 链接 ， 
包括 图 像 或 多 媒体 文件 ， 还 可 以 指向 电子 邮件 地 址 或 程序 。 在 网 页 中 创建 链接 ， 就 可 以 把 互联 网 中 众 
多 的 网 站 和 网 页 联系 起 来 ， 构 成 一 个 有 机 的 整体 。 网 站 中 的 每 一 个 网 页 都 是 通过 超 链接 的 形式 关联 在 
一 起 的 ， 如 果 页 面 之 间 是 彼此 独立 的 ， 那 么 这 样 的 网 站 将 无 法 正常 运行 。 


超 链接 是 指 从 一 个 网 页 指向 一 个 目标 的 链接 关系 ， 这 个 目标 可 以 是 另 一 个 网 页 ， 也 可 以 是 相同 网 
页 上 的 不 同位 置 ， 还 可 以 是 一 张 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 ， 甚 至 是 一 个 应 用 程序 。 而 用 来 
超 链接 的 对 象 ， 可 以 是 一 段 文本 或 者 是 一 张 图 片 。 

超 链接 由 源 地 址 文件 和 目标 地 址 文件 构成 ， 当 访问 者 单 击 超 链接 时 ， 浏 览 器 会 从 相应 的 目标 地 址 
检索 网 页 并 显示 在 浏览 器 中 。 如 果 目 标 地 址 不 是 网 页 而 是 其 他 类 型 的 文件 ， 浏 览 器 会 自动 调用 本 地 计 
算 机 上 的 相关 程序 打开 访问 的 文件 。 

在 网 页 中 创建 一 个 完整 的 超 链 接 ， 通 常 需要 由 3 个 部 分 组 成 。 

e 超 链接 <a> 标签 

通过 为 网 页 中 的 文本 或 图 像 添加 超 链 接 <a> 标签 ， 将 相应 的 网 页 元 素 标识 为 超 链接 。 

e href 属性 

href 属性 是 超 链接 <a> 标签 中 的 属性 ， 用 于 标识 超 链 接地 址 。 

。 超 链 接地 址 

超 链接 地 址 ( 又 称 为 URL) 是 指 超 链接 所 链接 到 的 文件 路 径 和 文件 名 。URL 用 于 标识 Web 或 本 
地 计算 机 中 的 文件 位 置 ， 可 以 指向 某 个 HTML 页 面 ， 也 可 以 指向 文档 引用 的 其 他 元 素 ， 如 图 形 、 脚 
本 或 其 他 文件 。 


超 链接 由 源 地 址 和 目标 地 址 文件 构成 ， 当 访问 者 单 击 某 个 超 链接 时 ， 浏 览 器 会 自动 从 相应 的 目标 
地 址 检索 网 页 并 显示 在 浏览 器 中 。 如 果 链 接 的 对 象 不 是 网 页 而 是 其 他 类 型 的 文件 ， 浏 览 器 会 自动 调用 
本 机 上 的 相关 程序 打开 访问 的 文件 。 

<a> 标签 的 基本 语法 如 下 。 


<a href=" 链接 目标 "> 链接 显示 文本 </a> 


<a> 为 链接 标签 ，<a> 标签 的 属性 有 : href 属性 ， 该 属性 指定 链接 地 址 ; name 属性 ， 该 属性 
给 链接 命名 ; title 属性 ， 该 属性 给 链接 添加 提示 文字 ; target 属性 ， 该 属性 指定 链接 的 目标 窗口 。 














@3s 


相对 路 径 是 最 适合 网 站 的 内 部 链接 。 只 要 是 属于 同一 网 站 ， 即 使 不 在 同一 个 目录 中 ， 相 对 路 径 也 
非常 适合 。 

如 果 链 接 到 同一 目录 中 ， 则 只 需 输 入 要 链接 文档 的 名 称 ; 如果 要 链接 到 下 一 级 目录 中 的 文件 ， 只 
需 先 输入 目录 名 ， 然 后 加 “/”， 再 输入 文件 名 ; 如 果 要 链接 到 上 一 级 目录 中 的 文件 ， 则 先 输入 “../”， 
再 输入 目录 名 、 文 件 名 。 

绝对 路 径 为 文件 提供 完整 的 路 径 ， 包 括 使 用 的 协议 ( 如 http、ftp、rtsp 等 )。 一 般 常 见 的 绝对 路 
径 如 http:/www.sina.com.cn、ftp:/202.113.234.1/ 等 。 

采用 绝对 路 径 的 缺点 在 于 这 种 方式 的 超 链接 不 利于 测试 。 如 果 在 站 点 中 使 用 绝对 路 径 ， 要 想 测试 
链接 是 否 有 效 ， 必 须 在 Internet 服务 器 端 对 超 链 接 进 行 测试 。 


在 网 页 中 创建 链接 
最 终 文件 : 光盘 \ 最终 文件 \ 第 3 章 \3-5-3.html 视频; 光盘 \ 视 频 \ 第 3 章 \3-5-3.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-5-3.html”, 效果 如 图 3-67 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 3-68 所 示 。 





<1doctype html> 

<htmL> 

<head> 

<meta charset="Utf-8"> 
<title> 在 网 页 中 创建 涟 接 </title> 

<Link href="style/3-5-3.css" rel="stylesheet" type= 
"text/css"> 

</head> 


<body> 
<div id="word"> 了 解 我 们 进入 网 站 </div> 
</body> 
</html> 














图 3-67 图 3-68 


呈 轴 | 为 网 页 中 相应 的 文字 添加 <a> 标签 并 设置 相对 链接 地 址 ， 如 图 3-69 所 示 。 保 存 页 面 ， 在 浏 
览 器 中 预览 页 面 ， 效 果 如 图 3-70 所 示 。 





<body> 








<div id="word"><a_href="3-4-2.html"> 了 解 我 们 </a> 
进入 网 站 </div> 
</body> 











图 3-69 图 3-70 


5 单 击 页 面 中 设置 了 超 链接 的 文字 ， 即 可 跳 转 到 所 链接 的 3-4-2.html 页 面 ， 如 图 3-71 所 示 。 
返回 网 页 HTML 代码 中 ,为 相应 的 文字 添加 <a> 标签 并 设置 URL 绝对 链接 地 址 ， 如 图 3-72 所 示 。 
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区 保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 3-73 所 示 。 单 击 页 面 中 设置 了 超 链接 的 文字 ， 








<body> 
<div id="word"><a href="3-4-2.html"> 了 解 我 们 </a> 


<a_href="http://wmw.163. com"> 进 入 网 站 </a></ 
div> 


| | </body> 








图 3-71 


图 3-72 


即 可 跳 转 到 网 易 网 站 首页 面 ， 如 图 3-74 所 示 。 
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超 链接 还 可 以 进一步 扩展 网 页 的 功能 ， 比 较 常 用 的 有 发 送 电 子 邮件 、 空 链接 和 下 载 链接 等 。 创 建 





以 上 链接 只 需 修改 链接 的 href 值 。 
电子 邮件 链接 的 语法 格式 如 下 。 
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<ahref="mailto: 邮件 地 址 "> 发 送 电子 邮件 </a> 


创建 电子 邮件 链接 的 要 求 是 邮件 地 址 必须 完整 ， 如 intel@163.com。 


空 链 接 的 语法 格式 如 下 。 


<a href="#"> 链接 的 文字 </a> 


下 载 链 接 的 语法 格式 如 下 。 


<a href=" 下 载 文件 路 径 "> 链接 的 文字 </a> 


下 载 链接 可 以 为 浏览 者 提供 下 载 文件 ， 是 一 种 很 实用 的 下 载 方式 。 





在 网 页 中 创建 特殊 超 链接 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 3 章 \3-5-4.htm| 。 视频 : 光盘 \ 视 频 \ 第 3 章 \3-5-4.mp4 


[GE 执行 “文件 > 打开” 命令, 打开 页 面 “ 光 盘 \ 源 文件 \ 第 3 章 \3-5-4.html”, 效果 如 图 3-75 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 3-76 所 示 。 





div id="box"> 

<div id="picl"><img src="images/135468.8if" width="218" 

leight="57" alt=""/><img src="images/35467.gif" width= 

139" height: alt=""/></div> 

<div id="pic2"><img src="images/35406.gif" width="195" 
eight="67" a 2 tbe gif" width= 

|"156" height=" "67" alt="" 

Ey 1d=" tet", 蘑 杂 PR68 诬 计 和 汪 凑 权 所 有 本 公司 保留 最 终 解释 权 . 

地 址 ; 某 某 市 某 某 区 某 某 路 57 号 明珠 大 厦 2669<br> 


服 邮箱 : xxxxxx@927.com</div> 
Jdiv> 


图 3-75 图 3-76 


国 岂 在 网 页 中 为 相应 的 图 片 添 加 <a> 标签 ， 并 设置 Email 链接 ， 直 接 将 href 属性 设置 为 
mailto:+ 电子 邮件 地 址 即 可 , 如 图 3-77 所 示 。 保存 页 面 , 在 浏览 器 中 预览 页 面 , 效果 如 图 3-78 所 示 。 





















Ss ~) 
DE oweeerns csi en me Es ten Bee or 
[as 
es 
<div id="picl"><a href="mailto:xXxxxXXxxx@qq.com?subject= | eon en | 


客服 帮助 "><img src="images/35468.gif" width="218" height= | 
"57" alt=""/></a><img src="images/35407.gif" width="139" 
height="57" alt=""/></div> 

<div id="pic2"><img src="images/35466.gif" width="195" 
height="67" pe re/ gif" width= 
"156" height="67" alt="" 

Te id="text" 你 习 褒 可 所 有 本 公司 保留 最 终 解释 权 . 


地 二， : 某 某 市 某 某 区 某 某 路 57 号 明珠 大 厦 2669<br> 
客服 邮箱 : xxxxxx@927.com</div> 
</div> 
































图 3-77 图 3-78 


用 户 在 设置 时 还 可 以 蔡 浏 览 者 加 入 邮件 的 主题 。 方 法 是 在 输入 电子 邮件 地 址 后 
加 入 “?subject= 要 输入 的 主题 ”的 语句 ， 实 例 中 主题 可 以 写 “ 客 服 帮 助 ”， 完 整 
的 语句 为 “mailto:xxxxxx@qq.com?subject= 客服 帮助 ”。 





到 一 单 击 设置 了 Email 链接 的 图 片 ， 可 以 弹出 系统 中 默认 的 电子 邮件 收发 软件 ， 如 图 3-79 所 示 。 
返回 网 页 HTML 代 码 中 ， 在 网 页 中 为 相应 的 图 片 添加 <a> 标签 ， 并 设置 文件 下 载 链接 ， 直接 将 href 
属性 设置 为 需要 下 载 的 文件 即 可 ， 如 图 3-80 所 示 。 


41 和 





<dilv Td="box™> 
<div id="picl"><a href="maitto:xoooooocxeqq.com?subject= 
客服 帮助 "> <img src="images/35468.gif" width="218" height= 
"57" alt=""/></a><img src="images/35407.gif" width="139" 
height="57" alt=""/></div> 
<div id="pic2"><a href="images/rose.rar"><img src= 
"images/35406.g1fT WTI" TeTEFET657m alt=""/></a> 
<img src="images/35405.gif" width="156" height: alt= 
"></div> 
<div id="text"> 某 某 网 站 设计 公司 版 权 所 有 .本 公司 保留 最 终 解释 权 . 
<br> 
地 址 : 某 某 市 某 某 区 某 某 路 57 号 明珠 大 厦 2669<br> 
客服 邮箱 : xxxxxx@927.com</div> 
</div> 


图 3-79 图 3-80 


网 保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 3-81 所 示 。 单 击 设置 文件 下 载 链接 的 图 片 ， 可 
以 弹出 文件 下 载 的 提示 ， 如 图 3-82 所 示 。 









































图 3-81 


国 为 网 页 中 相应 的 图 片 添加 <a> 标签 ， 并 设置 空 链接 ， 直 接 将 href 属性 设置 为 # 即 可 ， 如 
3-83 所 示 。 保 存 页 面 ， 在 浏览 器 中 预览 页 面 ， 单 击 设置 了 空 链接 的 图 片 ， 不 能 实现 页 面 跳 转 ， 
如 图 3-84 所 示 。 








<div 1d="box"> 
<div id="picl"><a href="mailto:xxxxxxxx@qq.com?subject= 
客服 帮助 "><img src="images/35468.gif" width="218" height= 
"57" alt=""/></a><img src="images/35467.gif" width="139" 
height="57" alt=""/></div> 
<div id="pic2"><a href="images/rose.rar"><img src= 
"images, 35466- gif" width="195" height="67" alt=""/></a><al 
= mg src="images/35405.gif" width="156" height= 
"67" alt=""/></a></div> 
<div id="text"> 巢 某 网 站 设计 公司 版 权 所 有 .本 公司 保留 最 终 解释 权 . 
<br> 
地 址 : 某 某 市 某 某 区 某 某 路 57 号 明珠 大 厦 2669<br> 
客服 邮箱 : xxxxxx6927.com</div> 
</div> 


Cr 


























图 3-83 图 3-84 


G+ 


所 谓 空 链 接 ， 就 是 没有 目标 端点 的 链接 。 利 用 空 链接 ， 可 以 激活 文件 中 链接 对 
应 的 对 象 和 文本 。 当 文本 或 对 象 被 激活 后 ， 可 以 为 之 添加 行为 ， 例 如 当 鼠 标 经 过 后 
变换 图 片 ， 或 者 使 某 一 Div 显示 。 





在 网 页 文件 中 ， 默 认 情 况 下 超 链 接 在 原来 的 浏览 器 窗口 中 打开 ，HTML 技 术 提供 了 target 属性 
来 控制 打开 的 目标 窗口 。targe 属性 的 基本 语法 如 下 。 


<a href=" 链接 目标 " target=" 目标 窗口 的 打开 方式 " > 
target 属性 的 取 值 有 4 种 ， 介 绍 如 表 3-5 所 示 。 
表 3-5 target 属性 的 属性 值 说 明 


性 值 | 说 。 明 
LS 该 属性 值 代表 在 当前 页 面 中 打开 链接 

LA 该 属性 值 表示 在 一 个 全 新 的 空白 窗口 中 打开 链接 

[LEGAL 该 属性 值 表示 在 顶层 框架 中 打开 链接 ， 也 可 以 理解 为 在 根 框架 中 打开 链接 
[SG 表示 在 当前 框架 的 上 一 层 里 打开 链接 


有 时 候 ， 超 链接 不 能 完全 描述 所 要 链接 的 内 容 时 ， 超 链接 标签 提供 的 title 属性 能 很 方便 地 为 浏览 
者 做 出 提示 。title 属性 的 值 即 为 提示 内 容 ， 当 光标 停留 在 设置 了 title 属性 的 链接 上 时 ， 提 示 内 容 就 会 
出 现 。title 属性 的 基本 语法 如 下 。 


<a href= 链接 文件 的 地 址 itle= 链接 的 提示 文字 >…</a> 


title 属性 用 于 给 链接 添加 提示 文字 ， 包 含 在 链接 标签 内 部 ， 用 法 较为 简单 。 
网 站 的 一 些 页 面 中 ， 经 常 由 于 内 容 过 多 ， 叶 致 页 面 过 长 ， 访 问 者 需要 拖 动 浏览 器 上 的 滚动 条 才能 查 
看 完整 的 页 面 。 为 了 方便 用 户 查看 网 页 的 内 容 ， 在 网 页 中 需要 建立 锚 点 链接 。 创 建 锚 点 的 基本 语法 如 下 。 


<a name=" 锚 点 的 名 称 "></a> 


在 网 页 中 创建 了 锚 点 之 后 ， 就 可 以 创建 到 锚 点 的 链接 ， 需 要 使 用 # 符号 以 及 锚 点 的 名 称 作 为 href 
属性 的 值 。 创 建 锚 点 链接 的 基本 语法 如 下 。 


<a href="# 锚 点 名 称 ">…</a> 


本 章 主要 介绍 了 HTML 中 一 些 基本 标签 的 使 用 方法 和 技巧 ， 通 过 这 些 基本 标签 的 应 用 ， 可 以 在 网 
页 中 对 文字 和 图 片 进 行 排版 和 设置 ， 从 而 使 网 页 中 文字 和 图 片 的 效果 更 加 美观 。 完成 本 章 内 容 的 学 习 后 ， 
读者 需要 掌握 网 页 中 基本 标签 的 使 用 和 设置 方法 ， 并 在 实际 制作 页 面 的 过 程 中 能 够 灵活 运用 。 
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第 4 章 使 用 HTML 5 结构 中 3 


标签 
一 个 典型 的 HTML 页 面 中 通常 包含 头 部 、 导 航 、 主 体内 容 、 
侧 边 内 容 和 页 脚 等 区 域 。 在 之 前 的 HTML 页 面 中 ， 这 些 区 域 全 
部 都 使 用 <div> 标签 进行 标识 ， 并 不 易于 用 户 的 识别 和 浏览 器 引 
擎 的 分 析 。 在 HTML 5 中 新 增 了 描述 文档 结构 的 相关 标签 ， 通 过 
使 用 这 些 标签 , 可 以 很 清晰 地 在 HTML 代码 中 标识 出 页 面 的 结构 。 


本 章 将 向 读者 介绍 HTML 5 中 新 增 的 文档 结构 标签 。 


欢迎 光临 我 们 的 网 站 ! 600 


GINVENTIDR YE 








标签 的 作用 和 使 用 方法 

理解 使 用 <nav> 标签 标识 导 
航 的 方法 

WY 理解 使 用 <aside> 标签 标识 
辅助 信息 内 容 的 方法 

MY 理解 各 种 语义 模块 标签 的 使 用 
方法 

Y 学 握 HTML 5 绀 绿 7 答 在 HTML 
文档 中 的 应 用 











在 HTML 5 页 面 中 ， 为 了 使 文档 的 结构 更 加 清晰 明确 ， 新 增 了 几 个 与 页 眉 、 页 脚 、 内 容 区 块 等 
文档 结构 相关 联 的 文档 结构 标签 。 本 节 将 向 读者 详细 介绍 HTML 5 中 在 页 面 的 主体 结构 方面 新 增 的 











结构 标签 。 





国 需要 注意 ， 内 容 区 块 是 指 将 HTML 页 面 按 逻辑 进行 分 割 后 的 单位 。 例 如 ， 对 于 























博客 网 站 来 说 , 导航 菜单 、 文 章 正文 、 文 章 的 评论 等 每 一 个 部 分 都 可 以 称 为 内 容 区 块 。 











网 页 中 常常 出 现 大 段 的 文章 内 容 ， 通 过 文章 结构 元 素 可 以 将 网 页 中 大 段 的 文章 内 容 标识 出 来 ， 使 
网 页 的 代码 结构 更 加 整齐 。 在 HTML 5 中 新 增 了 <article> 标签 ， 使 用 该 标签 可 以 在 网 页 中 定义 独立 











的 内 容 ， 包 括 文章 、 博 客 和 用 户 评论 等 内 容 。 
<article> 标签 的 基本 语法 格式 如 下 。 








<article> 文章 内 容 </article> 






































个 article 元 素 通常 有 它 自己 的 标题 , 一 般 放 在 一 个 <header> 标签 中 ， 有 时 还 有 自己 的 脚注 。 




















例如 ， 下 面 的 网 页 HTML 代码 。 























<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 网 页 新 闻 </title> 
</head> 
<body> 
<article> 
<header> 
<hl> 新 闻 标题 </h1> 
<time pubdate="pubdate">2015 年 10 月 12 日 </time> 
</header> 
<p> 新 闻 正文 内 容 </p> 
<footer> 
新 闻 版 底 信 息 
</footer> 
</article> 
</body> 
</html> 


从 以 上 的 HTML 页 面 代码 中 可 看 出 ， 在 <header> 标签 中 说 入 文章 的 标题 ， 在 这 部 分 中 ， 文 章 


的 标题 使 用 <h1> 标签 包含 ， 使 用 <time> 标签 包含 文章 的 发 布 日 期 。 在 <header> 标签 的 结束 标签 
之 后 使 用 <p> 标签 包含 新 闻 的 正文 内 容 ， 在 结尾 处 使 用 <footer> 标签 说 入 文章 的 版 底 信 息 ， 作 为 脚 























注 。 整 个 示例 的 内 容 相对 比较 独立 、 完 整 ， 因 此 ， 对 这 部 分 使 用 了 <article> 标签 。 











<article> 标签 是 可 以 赃 套 使 用 的 ， 当 该 标签 进行 说 套 使 用 的 时 候 ， 内 部 的 <article> 标签 中 的 内 


容 必须 和 外 部 的 <article> 标签 中 的 内 容 相关 。 例 如 下 面 的 网 页 HTML 代码 。 





<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 网 页 新 闻 </title> 
</head> 
<body> 
<article> 
<header> 
<hl> 新 闻 标题 </h1> 
<time pubdate="pubdate">2015 年 0 月 12 日 </time> 
</header> 
<p> 新 闻 正 文 内 容 </p> 
<footer> 
新 闻 版 底 信 息 


</footer> 
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<section> 
<h2> 评论 </h2> 
<article> 
<header> 
<h3> 用 户 1</h3> 
</header> 
<p> 评论 内 容 </p> 
</article> 
<article> 
<header> 
<h3> 用 户 2</h3> 
</header> 
<p> 评论 内 容 </p> 
</article> 
</section> 
</article> 
</body> 
</html> 


以 上 的 HTML 代 码 通 过 结构 标签 将 内 容 分 为 几 个 部 分 ， 文 章 标题 放 在 <header> 标签 中 ， 文 章 
正文 内 容 放置 在 <header> 标签 区 域 之 后 的 <p> 标签 中 ， 然 后 使 用 <section> 标签 将 正文 与 评论 部 
分 进行 了 区 分 ， 在 <section> 标签 中 诅 入 了 评论 的 内 容 ， 在 评论 中 每 一 个 人 的 评论 相对 来 说 又 是 比较 
独立 、 完 整 的 ， 因 此 对 它们 都 使 用 了 一 个 <article> 标签 ， 在 评论 的 <article> 标签 中 ， 又 可 以 分 为 
标题 与 评论 内 容 部 分 ， 分 别 放 在 <header> 与 <p> 标签 中 。 

另外 ，<article> 标签 也 可 以 用 来 表示 插件 ， 它 的 作用 是 使 插件 看 起 来 好 像 内 散在 页 面 中 的 一 样 。 
使 用 <article> 标签 表示 插件 的 代码 如 下 所 示 。 


<article> 
<h1> 使 用 插件 </h1> 
<object> 
<paramname="allowFullSscreen" value="true"> 
<embed src=" 文件 地 址 "width=" 宽度 " height=" 高 度 "> </embed> 
</object> 


</article> 


在 网 页 文档 中 常常 需要 定义 章节 等 特定 的 区 域 。 在 HTML 5 中 新 增 了 <section> 标签 ， 该 标签 
用 于 对 页 面 中 的 内 容 进 行 分 区 。 一 个 section 元 素 通 常 由 内 容 及 其 标题 组 成 。<div> 标签 也 可 以 用 来 
对 页 面 进行 分 区 ， 但 是 <section> 标签 并 不 是 一 个 普通 的 容器 元 素 ， 当 一 个 容器 需要 被 直接 定义 样式 
或 通过 脚本 定义 行为 时 ， 推 荐 使 用 <div> 标签 ， 而 非 <section> 标签 。 

<section> 标签 的 基本 语法 格式 如 下 。 
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<section> 文章 内 容 </section> 


提示 <div> 标签 关注 结构 的 独立 性 ， 而 <section> 标签 关注 内 容 的 独立 性 。 
<section> 标签 包含 的 内 容 可 以 单独 存储 到 数据 库 中 或 输出 到 Word 文档 中 。 


例如 ,下面 的 HTML 代码 中 使 用 <section> 标签 将 新 闻 列 表 的 内 容 单独 分 隔 , 在 HTML 5 之 前 ， 
通常 使 用 <div> 标签 来 分 隔 该 块 内 容 。 


<!doctype html> 
<html> 
<head> 
<meta charset= " utf-8 " > 
<title> 网 页 新 闻 </title> 
</head> 
<body> 
<section> 
<h1> 网 站 新 闻 </h1> 
<ul> 
<1i> 新 闻 标题 1</1i> 
<1i> 新 闻 标题 2</1i> 
<1i> 新 闻 标题 3</1i> 
</ul> 
</section> 
</body> 
</html> 


<article> 标签 和 <section> 标签 都 是 HTML 5 新 增 的 标签 ， 它 们 的 功能 与 <div> 标签 类 似 ， 
都 是 用 来 区 分 页 面 中 不 同 的 区 域 ， 它 们 的 使 用 方法 也 相似 ， 因 此 很 多 初学 者 会 将 其 混用 。HTML 5 之 
所 以 新 增 这 两 种 标签 , 就 是 为 了 更 好 地 描述 HTML 文档 的 内 容 ， 所 以 它们 之 间 是 存在 一 定 的 区 别 的 。 

<article> 标签 代表 HTML 文档 中 独立 完整 的 可 以 被 外 部 引用 的 内 容 。 例 如 ， 博 客 中 的 一 篇 文章 、 
论坛 中 的 一 个 帖子 或 者 一 段 用 户 评论 等 。 因 为 <article> 标签 是 一 段 独立 的 内 容 ， 所 以 <article> 标 
签 中 通常 包含 头 部 (<header> 标签 ) 和 底部 (<footer> 标签 ) 。 

<section> 标签 用 于 对 HTML 文档 中 的 内 容 进行 分 块 ， 一 个 <section> 标签 中 通常 由 内 容 以 及 
标题 组 成 。<section> 标签 中 需要 包含 一 个 <hn> 标签 ， 一 般 不 包含 头 部 (<header> 标签 ) 或 者 底部 
(<footer> 标签 )。 通 常 使 用 <section> 标签 为 那些 有 标题 的 内 容 进 行 分 段 。 

<section> 标签 的 作用 是 对 页 面 中 的 内 容 进行 分 块 处 理 ， 相 邻 的 <section> 标签 中 的 内 容 应 该 
是 相关 的 ， 而 不 是 像 <article> 标签 中 的 内 容 那 样 是 独立 的 。 例 如 下 面 的 HTML 代码 。 


<xarticle> 
<header> 
<h1l> 网 页 设计 介绍 </h1> 
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</header> 
<p> 这 里 是 网 页 设计 的 介绍 内 容 ， 介 绍 有 关 网 页 设计 的 知识 … …</p> 
<section> 
<h2> 评 论 </h2> 
<article> 
<h3> 评论 者 : 用 户 1</h3> 
<p> 这 里 是 评论 内 容 </p> 
</article> 
<article> 
<h3> 评论 者 : 用 户 2</h3> 
<p> 这 里 是 评论 内 容 </p> 
</article> 
</section> 


</article> 


从 以 上 这 段 HTML 代码 中 ， 可 以 观察 到 <article> 标签 与 <section> 标签 的 区 别 。 事 实 
上 <article> 标签 可 以 看 作 是 特殊 的 <section> 标签 。<article> 标签 更 强调 独立 性 、 完 整 性 ， 
<section> 标签 更 强调 相关 性 。 

既然 <article> 和 <section> 标签 是 用 来 划分 区 域 的 ， 又 是 HTML 5 的 新 增 标签 ， 那 么 是 否 
可 以 使 用 <article> 和 <section> 标签 来 代替 <“div> 标签 进行 网 页 布局 呢 ? 答案 是 否定 的 ，<div> 
标签 的 作用 就 是 用 来 布局 网 页 ， 划 分 大 的 区 域 的 。 在 HTML 4 中 只 有 <div> 和 <span> 标签 用 来 
在 HTML 页 面 中 划分 区 域 ， 所 以 我 们 习惯 性 地 把 <div> 当成 一 个 容器 。 而 HTML 5 改变 了 这 种 用 
法 ， 它 让 <div> 的 工作 更 纯正 ，<div> 标签 就 是 用 来 布局 大 块 ， 在 不 同 的 内 容 块 中 ， 按 照 需求 添加 
<article>、<section> 等 内 容 块 ， 并 且 显 示 其 中 的 内 容 ， 这 样 才 是 合理 地 使 用 这 些 元 素 。 

因此 ， 在 使 用 <section> 标签 时 需要 注意 以 下 几 个 问题 。 

e 不 要 将 <section> 标签 当 作 设 置 样式 的 页 面容 器 ， 对 于 此 类 操作 应 该 使 用 <div> 标签 来 实现 。 

e ”如果 <article> 标签 、<aside> 标签 或 者 <nav> 标签 更 符合 使 用 条 件 ， 不 要 使 用 <section> 

标签 。 

e 不 要 为 没有 标题 的 内 容 区 块 使 用 <section> 标签 。 

在 HTML 5 中 ，<article> 标签 可 以 看 作 一 种 特殊 种 类 的 <section> 标签 ， 它 比 <section> 标 
签 更 强调 独立 性 ， 即 <section> 标签 强调 分 段 或 分 块 ， 而 <article> 标签 则 强调 独立 性 。 具 体 来 说 ， 
如 果 一 块 内 容 相 对 来 说 比较 独立 、 完 整 的 时 候 ， 应 该 使 用 <article> 标签 ， 但 是 如 果 想 将 一 块 内 容 分 
成 几 段 的 时 候 ， 应 该 使 用 <section> 标签 。 另 外 ， 在 HTML 5 中 ，<div> 标签 只 是 一 个 容器 ， 当 使 
用 CSS 样式 的 时 候 ， 可 以 对 这 个 容器 进行 一 个 总 体 的 CSS 样式 的 套用 。 


导航 是 每 个 网 页 中 都 包含 的 重要 元 素 之 一 ， 通 过 网 站 导航 可 以 在 网 站 中 各 页 面 之 间 进 行 跳 转 。 在 
HTML 5 中 新 增 了 <nav> 标签 ， 使 用 该 标签 可 以 在 网 页 中 定义 网 页 的 导航 部 分 。 
<nav> 标签 的 基本 语法 格式 如 下 。 


<nav> 导航 内 容 </nav> 
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<nav> 导航 内 容 </nav> 
<nav> 标签 标识 的 是 一 个 可 以 用 作 页 面 导 航 的 链接 组 ， 其 中 的 导航 元 素 链接 到 其 他 页 面 或 当前 
页 面 的 其 他 部 分 ， 并 不 是 所 有 的 链接 组 都 需要 被 放置 在 <nav> 标签 中 ， 只 需要 将 主要 的 、 基 本 的 链 
接 组 放 进 <nav> 标签 中 即 可 。 
一 个 页 面 中 可 以 拥有 多 个 <nav> 标签 ， 作 为 页 面 整体 或 不 同 部 分 的 导航 。 具 体 来 说 ，<nav> 标 
签 可 以 用 于 以 下 位 置 。 
@ ”传统 导航 条 。 常 规 网 站 都 设置 有 不 同 层级 的 导航 条 ， 其 作用 是 将 当前 画面 跳 转 到 网 站 的 其 他 
主要 页 面 上 去 。 
e 侧 边栏 导航 。 现 在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 将 页 面 从 当前 页 面 
跳 转 到 其 他 页 面 上 去 。 
e 页 面 导航 。 页 面 导 航 的 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 。 
。 翻 页 操作 。 翻 页 操作 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 文章 滚动 。 
在 HTML 5 中 ， 只 要 是 导航 性 质 的 链接 ， 就 要 很 方便 地 将 其 放 入 到 <nav> 标签 中 ， 该 标签 可 以 
在 一 个 HTML 文档 中 出 现 多 次 , 作为 整个 页 面 的 导航 或 部 分 区 域内 容 的 导航 。 例 如 下 面 的 HTML 代 码 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 网 页 新 闻 </title> 
</head> 
<body> 
<nav> 
<ul> 
<1i><a href="#"> 网 站 首页 </a></1i> 
<1i><a href="#"> 关于 我 们 </a></1i> 
<1i><a href="#"> 设计 作品 </a></1i> 
<1i><a href="#"> 联系 我 们 </a></1i> 
</ul> 
</nav> 
</body> 
</html> 


在 以 上 的 HTML 代码 中 ，<nav> 标签 中 包含 了 4 个 用 于 导航 的 超 链 接 ， 该 导航 可 以 用 于 网 页 全 
局 导航 ， 也 可 以 放 在 某 个 段落 ， 作 为 区 域 导航 。 


列 交 互 命令 的 菜单 上 的 ， 例 如 使 用 在 Web 应 用 程序 中 。 在 HTML 5 中 不 要 使 用 


很 多 用 户 喜 欢 使 用 <menu> 标签 进行 导航 ，<menu> 标签 主要 是 用 在 一 系 
<menu> 标签 代 蔡 <nav> 标签 。 
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侧 边 结构 元 素 可 用 于 创建 网 页 中 文章 内 容 的 侧 边栏 内 容 。 在 HTML 5 中 新 增 了 <aside> 标签 ， 
该 标签 用 于 创建 其 所 处 内 容 之 外 的 辅助 性 内 容 。<aside> 标签 中 的 内 容 应 该 与 其 附近 的 内 容 相关 。 
<aside> 标签 的 基本 语法 格式 如 下 。 


<aside> 辅助 信息 内 容 </aside> 


<aside> 标签 用 来 表示 当前 页 面 或 文章 的 辅助 信息 内 容 部 分 ， 它 可 以 包含 与 当前 页 面 或 主要 内 容 
相关 的 引用 、 侧 边栏 、 广 告 、 导 航 条 以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。<aside> 标签 主要 有 以 
下 两 种 使 用 方法 。 

(1) <aside> 标签 被 包含 在 <article> 标签 中 ， 作 为 主要 内 容 的 辅助 信息 部 分 ， 其 中 的 内 容 可 以 
是 与 当前 文章 有 关 的 资料 、 名 词 解释 等 。 其 基本 应 用 格式 如 下 。 


<article> 
<h1> 文章 标题 </h1> 
<p> 文章 主体 内 容 </p> 
<aside> 文章 内 容 的 辅助 信息 内 容 </aside> 


</article> 


(2) 在 <article> 标签 之 外 使 用 <aside> 标签 ， 作 为 页 面 或 全 局 的 辅助 信息 部 分 。 最 典型 的 是 侧 
边栏 ， 其 中 的 内 容 可 以 是 友情 链接 ， 或 是 博客 中 的 其 他 文章 列表 、 广 告 等 。 其 基本 应 用 格式 如 下 。 


<aside> 

<h2> 列表 标题 1</h2> 
<ul> 

<1i> 列表 项 1</1i> 
<1i> 列表 项 2</1i> 
</ul> 

<h2> 列表 标题 2</h2> 
<ul> 

<1i> 列表 项 1</1i> 
<1i> 列表 项 2</1i> 
</ul> 


</aside> 


微 格式 是 一 种 利用 HTML 的 class 属性 对 网 页 添加 附加 信息 的 方法 ， 附 加 信息 可 包含 新 闻 事 件 
发 生 的 日 期 和 和 时间、 个 人 电话 号 码 、 企 业 邮 箱 等 。 微 格式 并 不 是 在 HTML 5 之 后 才 有 的 , 在 HTML 5 
之 前 时 它 就 和 HTML 结 合 使 用 了 ,但 是 在 使 用 过 程 中 发 现在 日 期 和 时 间 的 机 器 编码 上 出 现 了 一 些 问题 ， 
编码 过 程 中 会 产生 一 些 歧义 。HTML 5 新 增 了 <time> 标签 ， 通 过 该 标签 可 以 无 歧义 、 明 确 地 对 机 器 
的 日 期 和 时 间 进 行 编码 ， 并 且 以 让 人 易 读 的 方式 展现 出 来 。 


Qs 


<time> 标签 用 于 表示 24 小 时 中 的 某 个 时 间或 某 个 日 期 ， 当 使 用 <time> 标签 表示 时 间 时 ， 人 允许 
设置 带 有 时 差 的 表现 方式 。 它 可 以 定义 很 多 格式 的 日 期 和 时 间 。 其 语法 格式 如 下 。 


<time datetime="2015-10-12">2015 年 10 月 12 日 </time> 

<time datetime="2015-10-12">10 月 12 日 </time> 

<time datetime="2015-10-12"> 我 的 生日 </time> 

<time datetime="2015-10-12T18:00"> 我 生日 的 晚 6 点 </time> 

<time datetime="2015-10-12T718:00z"> 我 生日 的 晚上 6 点 </time> 

<time datetime="2015-10-12T18:00+09:00"> 我 生日 的 晚上 8 点 的 美国 时 间 </time> 


编码 时 引擎 读 到 的 部 分 在 datetime 属性 中 ， 而 元 素 的 开始 标签 与 结束 标签 中 间 的 部 分 是 显示 在 
网 页 上 的 。datetime 属性 中 日 期 与 时 间 之 间 要 使 用 字母 “T” 分 隔 ，“T” 表 示 时 间 。 

注意 倒数 第 2 行 ， 时 间 加 上 字母 “Z” 表 示 机 器 编码 时 使 用 UTC 标准 时 间 ， 倒 数 第 一 行 则 加 上 
了 时 差 ， 表 示 向 机 器 编码 另 一 地 区 时 间 ， 如 果 是 编码 本 地 时 间 ， 则 不 需要 添加 时 差 。 

pubdate 属性 是 一 个 可 选 的 布尔 值 属性 ， 可 以 添加 在 <time> 标签 中 ， 用 于 表示 文章 或 者 整个 网 
页 的 发 布 日 期 。 使 用 格式 如 下 。 





<time datetime="2015-10-12" pubdate>2015 年 10 月 12 日 </time> 


由 于 <time> 标签 不 仅仅 表示 发 布 时 间 ， 而 且 还 可 以 表示 其 他 用 途 的 时 间 ， 如 通知 、 约 会 等 。 为 
了 避免 引擎 误解 发 布 日 期 ,使 用 pubdate 属性 可 以 显 式 地 告诉 引擎 文章 中 哪个 时 间 是 真正 的 发 布 时 间 。 


除了 以 上 几 个 主要 的 结构 元 素 之 外 ， 在 HTML 5 中 还 新 增 了 一 些 表 示 罗 辑 结构 或 附加 信息 的 非 
主体 结构 元 素 。 


<header> 标签 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 面 内 的 一 个 
内 容 区 块 的 标题 ， 但 也 可 以 包含 其 他 内 容 ， 如 数据 表格 、 搜 索 表单 或 相关 的 Logo 图 片 ， 因 此 整个 页 
面 的 标题 应 该 放 在 页 面 的 开头 。 

<header> 标签 的 基本 语法 格式 如 下 。 


<header> 网 页 或 文章 的 标题 信息 </header> 


例如 下 面 的 网 页 HTML 代码 。 


<1!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 网 页 新 闻 </title> 
</head> 
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在 一 个 网 页 中 可 以 多 次 使 用 <header> 标签 。 在 <header> 标签 中 通常 包含 <h1> 至 <h6> 标签 ， 


也 可 以 包含 <hgroup>、<table>、<form> 和 <nav> 等 标签 ， 只 要 应 该 显示 在 头 部 区 域 的 语义 标签 ， 
都 可 以 包含 在 <header> 标签 中 。 


<hgroup> 标签 可 以 为 标题 或 者 子 标题 进行 分 组 ， 通 常 它 与 <h1> 至 <h6> 标签 组 合 使 用 ， 一 个 
内 容 块 中 的 标题 及 子 标题 可 以 通过 <hgroup> 标签 组 成 一 组 。 但 是 ， 如 果 文 章 只 有 一 个 主 标题 ， 则 不 


需要 使 用 <hgroup> 标签 。 
<hgroup> 标签 的 基本 语法 格式 如 下 。 


例如 下 面 的 网 页 HTML 代码 。 








在 该 HTML 代码 中 , 使 用 <hgroup> 标签 将 文章 的 主 标题 、 副 标题 和 文章 的 标题 说 明 进 行 分 组 ， 
以 便 让 搜索 引擎 更 容易 识别 标题 块 。 





HTML 5 中 新 增 了 <footer> 标签 ，<footer> 标签 中 的 内 容 可 能 作为 网 页 或 文章 的 注脚 ， 如 在 父 
级 内 容 块 中 添加 注释 ， 或 在 页 面 中 添加 版 权 信 息 等 。 页 脚 信息 有 很 多 形式 ， 如 作者 、 相 关 阅 读 链 接 及 
版 权 信息 等 。 

在 HTML 5 之 前 ， 要 描述 页 脚 信 息 ， 通 常 使 用 <div id= " footer " > 标签 定义 包含 框 。 自 从 
HTML 5 中 新 增 了 <footer> 标签 ,这 种 方式 将 不 再 使 用 , 而 是 使 用 更 加 语义 化 的 <footer> 元 素来 替代 。 

<footer> 标签 的 基本 语法 格式 如 下 。 





例如 ， 在 下 面 的 HTML 代码 中 使 用 <footer> 标签 分 别 为 页 面 中 的 文章 和 整个 页 面 添加 相应 的 肢 
注 信息 。 





与 <header> 标签 一 样 ， 页 面 中 也 可 以 重复 使 用 <footer> 标签 。 同 时 ， 可 以 为 <article> 标签 所 标 
注 的 文章 或 <section> 标签 所 标注 的 章节 内 容 添 加 <footer> 标签 ， 以 添加 相应 的 文章 或 章节 注释 信息 。 


HTML 5 中 新 增 了 <address> 标签 , 该 标签 用 来 在 HTML 文档 中 定义 联系 信息 , 包括 文档 作者 、 
电子 邮箱 、 地 址 、 电 话 号 码 等 信息 。 
<address> 标签 的 基本 语法 格式 如 下 。 








<address> 标签 的 用 途 不 仅仅 用 来 描述 电子 邮箱 或 地 址 等 联系 信息 ， 还 可 以 用 来 描述 与 文档 相 
关 的 联系 人 的 联系 信息 。 例 如 下 面 的 HTML 代码 。 





HTML 5 中 新 增 的 文档 结构 元 素 非常 适合 制作 文章 或 博客 类 的 网 站 页 面 。 通 过 使 用 HTML 5 的 
结构 元 素 ，HTML 5 的 文档 结构 比 大 量 使 用 <div> 标签 的 HTML 文档 结构 清晰 、 明 确 了 很 多 。 本 节 
将 综合 使 用 前 面 所 介绍 的 HTML 5 结构 元 素 制作 一 个 文章 页 面 。 


制作 文章 页 面 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 4 章 \4-3.htm| 。 视频 : 光盘 \ 视 频 \ 第 4 章 \4-3.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 4 章 \4-3.html”, 效果 如 图 4-1 所 示 。 
转换 到 代码 视图 中 ， 可 以 看 到 HTML 代码 ， 如 图 4-2 所 示 。 


人 








<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 制 作文 章 页 面 </title> 

<Link href="style/4-3.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 

</body> 

| </htmt> 














图 4-1 图 4-2 


[到 首先 制作 页 面 的 头 部 ， 在 <body> 与 </body> 标签 之 间 编 写 如 下 的 HTML 代码 。 


<body> 
<header> 
<div id="logo"><img src="images/4303.png" width="191" height="60" alt=""/></ 
div> 
<nav> 
<ul> 
<1i> 网 站 首页 </1i> 
<1i> 关于 我 们 </1i> 
<1i> 我 们 的 服务 </1i> 
<1i> 我 们 的 作品 </1i> 
<1i> 联系 我 们 </1i> 
</ul> 
</nav> 
</header> 


</body> 


葬 蜀 | 接 下 来 需要 通过 CSS 样式 对 页 面 头 部 的 显示 效果 进行 设置 。 转 换 到 外 部 CSS 样式 表 文 件 中 ， 
创建 名 为 .header01 的 类 CSS 样式 ， 如 图 4-3 所 示 。 返 回 网 页 HTML 代码 中 ， 在 <header> 标签 
中 添加 class 属性 应 用 名 为 .header01 的 类 CSS 样式 ， 如 图 4-4 所 示 。 
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-header9l { <body> 

















width: 100%; <header clLass="header91"> 
height: 5gpx; , st oe 区 pr width= 
border-bottom: solid lpx #333; Se SN “aU ie 
了 <ul> 
图 4-3 图 4-4 
HTML 代码 中 的 结构 标签 仅仅 是 在 HTML 文档 中 提供 一 种 良好 的 文档 内 容 表 现 
区 结构 ， 本 身 并 没有 任何 的 外 观 样式 ， 还 需要 通过 CSS 样式 对 其 外 观 的 显示 效果 进行 
控制 。 关 于 CSS 样式 的 设置 将 在 后 面 的 章节 中 进行 详细 介绍 。 


贡 转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 #0go 的 CSS 样式 和 名 为 .nav01 的 类 CSS 样 
式 ， 如 图 4-5 所 示 。 返 回 网 页 HTML 代码 中 ， 在 <nav> 标签 中 添加 class 属性 应 用 名 为 .nav01 的 
类 CSS 样式 ， 如 图 4-6 所 示 。 























#logo { 
nd <nav class="navel"> 
i 2 < ey 

} <1i> 网 站 首页 </1i> 

.navel { <1i> 关 于 我 们 </1i> 
width: 500px; <1i> 我 们 的 服务 </1i> 
vi croft 
Vine-heights We SU > 联系 我 们 </1i> 
font-weight: bold; </ul> 

} </nav> 

图 4-5 图 4-6 


廿 蜀 转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 .nav011i 的 CSS 样式 ， 如 图 4-7 所 示 。 完 成 使 
用 CSS 样式 对 页 面 头 部 外 观 效果 的 设置 ， 返 回 网 页 设计 视图 中 ， 可 以 看 到 页 面 头 部 的 显示 效果 ， 如 
4-8 所 示 。 





navel 1li { 
list-style-type: none; 
width: 169px; 
text-align: center; 
float: left; 














图 4-7 图 4-8 


[GE 接 下 来 制作 页 面 的 主体 内 容 部 分 ， 转 换 到 网 页 的 HTML 代码 中 ， 在 页 面 头 部 的 <header> 
标签 的 结束 标签 之 后 编写 如 下 的 HTML 代码 。 


Gs 


<article> 

<hl> 提供 完美 的 解决 方案 </h1> 

<p> 分 析 , 定 位 .思考 , 通过 这 三 个 步骤 我 们 可 以 让 事情 变 得 更 加 透明 简单 化 ! 基于 对 市 场 和 客 群 的 分 析 ， 
我 们 只 生产 解决 问题 的 创意 。</p> 

<p> 我 们 追求 动人 的 设计 ， 我 们 追求 完美 的 体验 ， 我 们 关注 设计 情感 ， 为 客户 提供 商业 和 视觉 完美 融合 
的 设计 方案 , 我 们 也 会 帮助 客户 在 互联 网 建立 更 好 的 网 络 形象 与 口碑 ,让 我 们 的 工作 变 得 更 加 有 趣 、 更 加 实用 、 
更 加 具有 商业 价值 。 这 也 是 YsSITEOUR 成 立 的 本 意 ! </p> 

<p> 在 过 去 的 这 几 年 里 ，YsITEOUR 的 作品 被 国内 外 知名 媒体 转载 收录 ! 并 接受 设计 联盟 专访 ， 国 内 知 
名 平台 网 站 推荐 等 。</p> 


</article> 


OR 转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 .article01 的 类 CSS 样式 ， 如 图 4-9 所 示 。 返 
回 网 页 HTML 代码 中 ， 在 <article> 标签 中 添加 class 属性 应 用 名 为 .article01 的 类 CSS 样式 ， 如 
图 4-10 所 示 。 

















-article@l { 

width: S510px; </header> 

height: auto; <article class="article@1"> 

overflow: hidden; <h1> 提 伍 壹 美的 梭 </hl> 

margin: Opx auto; <p> 分 析 、 定 位 、 思 考 ， 通 过 这 三 个 步骤 我 们 可 以 让 事情 

padding-top: 190px; | 。 变 的 更 加 透明 简单 化 ! 基于 对 市 场 和 客 群 的 分 析 ， 我 们 只 
} 生产 解决 问题 的 创意 。</p> 

图 4-9 图 4-10 


巩 5。” 转 换 到 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 .article01 h1 的 CSS 样式 ， 如 图 4-11 所 示 。 
完成 使 用 CSS 样式 对 正文 标题 的 设置 , 返回 网 页 设计 视图 中 , 可 以 看 到 正文 标题 的 显示 效果 , 如 图 4-12 
所 示 。 


| Bs Er A wssrii 





.artictegl hl { 
display: block; 
background-image: url(../images/4302.png); 
background-repeat: no-repeat; 
font-size: 30px; 
font-weight: bold; 
line-height: 69px; 
padding- left: 76px; 

















图 4-11 图 4-12 


[ma 国 转换 到 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 .article01 p 的 CSS 样式 ， 如 图 4-13 所 示 。 完 
成 使 用 CSS 样式 对 正文 段落 的 设置 , 返回 网 页 设计 视图 中 , 可 以 看 到 正文 段落 的 显示 效果 , 如 图 4-14 
所 示 。 
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.article0l p { 
margin-top: 12px; 
text-indent: 24px; 











图 4-13 


图 4-14 


ED 接 下 来 制作 页 面 的 版 底 信息 内 容 部 分 ， 转 换 到 网 页 的 HTML 代码 中 ， 在 页 面 文章 的 
<article> 标签 的 结束 标签 之 后 编写 如 下 的 HTML 代码 。 


<footer>CopyTright@2015 YSITEOUR .name .by:YSITEOUR<br> 
<address> 


联系 电话 : 010-xxxxxxxx E-Mail:xxxxx@163.com 
</address> 


</footer> 


国王 ”转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 .footer01 的 类 CSS 样式 ， 如 图 4-15 所 示 。 返 


回 网 页 HTML 代码 中 ， 在 <footer> 标签 中 添加 class 属性 应 用 名 为 .footer01 的 类 CSS 样式 ， 如 
图 4-16 所 示 。 




















.footer@l { 
width: 100%; 
height: S50px; 
padding-top: 10px; 
background-color: rgba(0,0,0,0.7); 
position: absolute; 





</article> 
<footer class="footer@1"> 
Copyright © 2015 YSITEOUR.name.by:YSITEOUR<br> 

















<address> 
bottom: QOpx; 联系 电话 : 616-xxxxxxxx E-Mail:xxxxx@163 .com 
text-align: center; </address> 
} </footer> 
图 4-15 


图 4-16 





眶 国 完成 使 用 CSS 样式 对 版 底 信息 的 设置 , 返回 网 页 设计 视图 中 , 可 以 看 到 版 底 信 息 的 显示 效果 ， 


如 图 4-17 所 示 。 保 存 页 面 , 并 保存 外 部 CSS 样式 表 文 件 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 页 面 的 效果 ， 
如 图 4-18 所 示 。 








图 4-17 图 4-18 


@ss 


本 章 重点 向 读者 介绍 了 HTML 5 新 增 的 各 种 文档 结构 标签 的 作用 与 使 用 方法 ， 通 过 在 HTML 文 
档 中 使 用 文档 结构 标签 可 以 使 HTML 文档 的 结构 层次 更 加 清晰 。 完 成 本 章 内 容 的 学 习 后 ， 读 者 可 理 
解 HTML 5 结构 标签 的 作用 及 使 用 方法 。 
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Pre MA 
= me 本 章 知识 点 
第 5 [= 本::| HTML 5 绘图 MY 了 解 <canvas> 标签 的 gl 
相关 知识 
六 理解 使 用 <canvas> 标签 在 
用 SVG 和 VML 来 给 图。 本 章 将 学 习 一 种 新 的 绘 加 方法 一 | 。 也 Rn 了 
使 用 canvas 元 素 ， 它 是 基于 HTML 5 原生 的 绘图 功能 。 使 用 


canvas 元 素 绘制 图 形 ， 方 便 了 使 用 JavaScript 脚本 的 前 端 开发 > pe he 


人 员 , 蜜 寥 数 行 代 码 , 就 可 以 在 canvas 元 素 中 完成 各 种 图 像 绘制 。 制 曲 线 的 方法 
本 章 将 介绍 如 何 使 用 canvas 元 素来 绘制 一 些 简单 的 图 形 。 ~ 掌握 在 网 页 中 绘制 文本 和 实现 


图 形 阴 影 的 方法 
A 掌握 为 所 绘制 图 形 应 用 渐变 颜 
色 的 方法 


GINVENTORY 








在 网 页 中 使 用 canvas 元 素 ， 像 使 用 其 他 HTML 标签 一 样 简单 ， 然 后 利用 JavaScript 脚本 调用 
绘图 AP， 绘制 各 种 图 形 。canvas 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 及 添加 图 形 的 方法 。 


<canvas> 标签 是 为 了 客户 端 矢 量 图 形 而 设 计 的 。 它 自己 没有 行为 ， 但 却 把 一 个 绘图 API 展现 
给 客户 端 JavaScript， 以 使 脚本 能 够 把 想 绘 制 的 东西 都 绘制 到 一 块 画布 上 。canvas 的 概念 最 初 是 
苹果 公司 提出 的 ， 并 在 Safari 1.3 浏览 器 中 首次 引入 。 随 后 Firefox 1.5 和 Opera 9 两 款 浏览 器 都 
开始 支持 使 用 <canvas> 标签 绘图 。 目 前 IE 9 以 上 版 本 浏览 器 也 已 经 支持 这 项 功能 。canvas 的 标 
准 化 由 一 个 Web 浏览 器 厂商 的 非 正 式 协会 推进 ， 目 前 ，<canvas> 标签 已 经 成 为 HTML 5 草案 中 
一 个 正式 的 标签 。 
<canvas> 标签 有 一 个 基于 JavaScript 的 绘图 APIl， 而 SVG 和 VML 使 用 一 个 XML 文档 来 描 
述 绘图 。Canvas 与 SVG 和 VML 的 实现 方式 不 同 ， 但 在 实现 上 可 以 相互 模拟 。<canvas> 标签 有 
自己 的 优势 ， 由 于 不 存储 文档 对 象 ， 性 能 较 好 。 但 如 果 需 要 移 除 画布 中 的 图 形 元 素 ， 往 往 需要 擦 掉 绘 
新 绘制 它 。 
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canvas 元 素 是 以 标签 的 形式 应 用 到 HTML 5 页 面 里 的 。 在 HTML 5 页 面 中 <canvas> 标签 的 




















应 用 格式 如 下 。 




















<canvas>…</canvas> 


<canvas> 标签 毕竟 是 个 新 东西 ， 很 多 旧 的 浏览 器 都 不 支持 。 为 了 增加 用 户 体验 ， 可 以 提供 替代 
文字 ， 放 在 <canvas> 标签 中 ， 例 如 : 


<canvas> 你 的 浏览 器 不 支持 该 功能 ! </canvas> 


当 浏 览 器 不 支持 <canvas> 标签 时 ， 标 签 里 的 文字 就 会 显示 出 来 。 跟 其 他 HTML 标签 一 样 ， 
<canvas> 标签 有 一 些 共 同 的 属性 。 


<canvas id="canvas" width="300" height="200"> 你 的 浏览 器 不 支持 该 功能 ! </canvas> 





其 中 ，id 属性 决定 了 <canvas> 标签 的 唯一 性 ， 方 便 查找 。width 和 height 属性 分 别 决定 了 
canvas 的 宽 和 高 ， 其 数值 代表 <canvas> 标签 内 包含 了 多 少 像素 。 

<canvas> 标签 可 以 像 其 他 标签 一 样 应 用 CSS 样式 表 。 如 果 在 头 部 的 CSS 样式 表 中 添加 如 下 
的 CSS 样式 设置 代码 。 











canvast{ 
border:1lpx solid #CCC; 
} 


那么 该 页 面 中 的 <canvas> 标签 将 会 显示 一 个 1 像素 的 浅 灰色 边框 。 
HTML 5 中 的 <canvas> 标签 本 身 并 不 能 绘制 图 形 ， 必 须 与 JavaScript 脚本 结合 使 用 ， 才 能 
网 页 中 绘制 出 图 形 。 
































可 以 使 用 CSS 样式 来 控制 canvas 的 宽 和 高 ， 但 canvas 内 部 的 像素 还 是 根据 
canvas 自身 的 width 和 height 属性 确定 ， 默 认 时 宽 是 300 像素 ， 高 是 150 像素 ， 
用 CSS 设置 canvas 尺寸 只 能 体现 canvas 占用 的 页 面 空间 ， 但 是 canvas 内 部 的 绘 
图 像素 还 是 由 width 和 height 属性 来 决定 的 , 这 样 会 导致 整个 canvas 内 部 的 图 像 变 形 。 


Canvas 元 素 本 身 是 没有 绘图 能 力 的 ， 所 有 的 绘制 工作 必须 在 JavaScript 内 部 完成 。 前 面 讲 过 ， 
canvas 元 素 提供 了 一 套 绘图 和 Pl， 那么 ， 实 现 使 用 <canvas> 标签 绘图 的 流程 是 先 要 获取 canvas 
元 素 的 对 象 ， 再 获取 一 个 绘图 上 下 文 ， 接 下 来 就 可 以 使 用 绘图 AP|I 中 丰富 的 功能 了 。 

了 》1. 获取 canvas 对 象 

在 绘图 之 前 ， 首 先 需要 从 页 面 中 获取 canvas 对 象 。 通 常 使 用 document 对 象 的 getElementByld() 

方法 获取 。 例 如 ， 以 下 代码 获取 页 面 中 id 名 称 为 canvas1 的 canvas 对 象 。 









































Var canvas=document. getElementByld("canvas1"); 














开发 者 还 可 以 使 用 通过 标签 名 称 来 获取 对 象 的 getElementByTagName 方法 。 
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》 2. 创建 二 维 的 绘图 上 下 文 对 象 
canvas 对 象 包含 了 不 同类 型 的 绘图 API， 还 需要 使 用 getContext() 方法 来 获取 接 下 来 要 使 用 
的 绘图 上 下 文 对 象 。 


Var context=canvas. getContext ("2d"); 


getContext 对 象 是 内 建 的 HTML 5 对 象 ,拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 . 字 符 及 添加 图 像 的 方法 。 
参数 为 2d4， 说 明 接 下 来 将 绘制 的 是 一 个 二 维 图 形 。 
》3. 在 Canvas 上 绘制 文字 

设置 绘制 文字 的 字体 样式 、 颜 色 和 对 齐 方 式 。 


// 设置 字体 样式 、 颜 色 及 对 齐 方式 
context .font="98px 黑体 "; 
context .fillSstyle="#036"; 


context .textAlign="center"; 
// 绘制 文字 


context.fillText ("中 ",100,120,200); 


font 属性 设置 了 字体 样式 。 人 fllStyle 属性 设置 了 字体 颜色 。textAlign 属性 设置 了 对 齐 方式 。filText() 
方法 用 填充 的 方式 在 Canvas 上 绘制 了 文字 。 


使 用 HTML 5 中 新 增 的 <canvas> 标签 能 够 实现 最 简单 直接 的 绘图 ， 也 能 够 通过 编写 脚本 实现 
极为 复杂 的 应 用 。 本 节 将 向 读者 介绍 如 何 使 用 <canvas> 标签 与 JavaScript 脚本 相 结 合 实现 一 些 简 
单 的 基本 图 形 绘制 。 


使 用 <canvas> 标签 绘制 直线 ， 需 要 通过 <canvas> 标签 与 JavaScript 中 的 moveTo、 lineTo 
和 方法 相 结合 。 
moveTo 方法 用 于 创建 新 的 子路 径 ， 并 设置 其 起 始点 ， 其 使 用 方法 如 下 。 


context .moveTo (x, y) 


lineTo 方法 用 于 从 moveTo 方法 设置 的 起 始点 开始 绘制 一 条 到 设置 坐标 的 直线 ， 如 果 前 面 没 有 
用 moveTo 方法 设置 路 径 的 起 始点 ， 则 lineTo 方法 等 同 于 moveTo 方法 。lineTo 方法 的 用 法 如 下 。 


context .lineTo (x, y) 


通过 moveTo 和 lineTo 方法 设置 了 直线 路 径 的 起 点 和 终点 ， 而 stroke 方法 用 于 沿 该 路 径 绘制 
一 条 直线 。 
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在 网 页 中 绘制 直线 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 \5-2-1.html 。 视频 : 光盘 \ 视 频 \ 第 5 章 \5-2-1.mp4 


OI 打开 页 面 “光盘 \ 源 文件 \ 第 5 章 \5-2-1.html”, 页 面 效果 如 图 5-1 所 示 。 转 换 到 代码 视图 中 ， 
在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 ， 并 对 相关 属性 进行 设置 ， 如 图 5-2 所 示 。 





<ldoctype html> 
<html> 


<head> 
<meta charset="utf-8"> 


<title> 在 网 页 中 给 制 直线 </title> 


<Link href="style/5-2-1.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 

<canvas_id="canvasl" width="666" height="46e"> 你 的 浏览 器 不 支持 该 功能 </canvas> 

















图 5-1 图 5-2 


区 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 , 创建 名 为 #canvas1 的 CSS 样式 , 如 图 5-3 
所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 <canvas> 标签 的 效 
果 ， 如 图 5-4 所 示 。 





#canvasl { 
border: lpx solid #FFF; 
margin: S50px; 














图 5-3 图 5-4 
[王国 返回 网 页 HTML 代码 中 ， 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 

var myCanvas=document .getElementByid("canvas1"); 
Var context=myCanvas .getContext ("2d"); 

context .moveTo (0,0); 

context.lineTo(600,400); 
context.strokeSstyle="#FFFFFF™; 

context.stroke(); 


</script> 


国保 存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 使 用 <canvas> 标签 与 JavaScript 脚本 相 结 合 
绘制 的 直线 效果 ， 如 图 5-5 所 示 。 
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图 5-5 


在 所 创建 的 名 为 #canvas1 的 CSS 样式 中 主要 设置 了 对 象 的 边框 为 1 像素 的 
白色 边框 ， 并 且 对 象 四 周 的 边 距 均 为 50 像素 。 在 这 里 主要 是 通过 CSS 样式 使 页 面 
中 的 canvas 对 象 更 容易 看 清楚 ， 关 于 CSS 样式 将 在 后 面 的 章节 中 进行 详细 介绍 。 





和 矩形 属于 一 种 特殊 而 又 普遍 使 用 的 图 形 。 和 矩形 的 宽 和 高 ， 就 确定 了 图 形 的 样子 。 再 给 予 一 个 绘制 
起 始 坐标 ， 就 可 以 确定 其 位 置 。 这 样 整个 矩形 就 确定 下 来 了 。 

绘图 API 为 绘制 矩形 提供 了 两 个 专用 的 方法 : strokeRect() 和 人 Rect()， 可 分 别 用 于 绘制 矩形 
边框 和 填充 矩形 区 域 。 在 绘制 之 前 ， 往 往 需要 先 设置 样式 ， 然 后 才能 进行 绘制 。 

关于 矩形 可 以 设置 的 属性 有 : 边框 颜色 、 边 框 宽 度 、 填 充 颜色 等 。 绘 图 API 提供 了 几 个 属性 可 
以 设置 这 些 样式 ， 属 性 说 明 如 表 5-1 所 示 。 


表 5-1 ”绘制 矩形 可 以 设置 的 属性 

说 。 明 
[SGGKeSiyle | 符合 CSS 规范 的 颜色 值 及 对 象 设置 线条 的 颜色 

ineWidtn 数字 设置 线条 宽度 ， 默 认 宽 度 为 1， 单 位 是 像素 
而 Se 符合 CSS 规范 的 颜色 什 设置 区 域 或 文字 的 填充 颜色 





其 中 , strokeStyle 可 设置 矩形 边框 的 颜色 , lineWidth 可 设置 边框 宽度 , fillStyle 可 设置 填充 颜色 。 
绘制 矩形 边框 需要 使 用 strokeRect 方法 ， 其 使 用 方法 如 下 。 


strokeRect (x,y,width,height); 


其 中 , width 表示 矩形 的 宽度 , height 表示 和 矩形 的 高 度 , x 和 y 分 别 是 矩形 起 点 的 横 坐标 和 纵 坐标 。 
例如 ， 以 下 代码 以 (50,50) 为 起 点 绘制 一 个 宽度 为 150， 高 度 为 100 的 矩形 。 


context.strokeRect (50,50,150,100); 


@a 


这 里 仅 绘制 了 和 矩 形 的 边框 ， 且 边框 的 颜色 和 宽度 由 属性 strokeStyle 和 lineWidth 来 指定 。 
填充 矩形 区 域 需要 使 用 f 仲 Rect() 方法 ， 其 使 用 方法 如 下 。 





fillRect (x,y,width,height); 


该 方法 的 参数 和 strokeRect() 方法 的 参数 是 一 样 的 ， 用 于 确定 矩形 的 位 置 及 大 小 。 例 如 ， 以 下 
代码 以 (50,50) 为 起 点 绘制 一 个 宽度 为 150， 高 度 为 100 的 矩形 。 


context .fillRect (50,50,150,100); 
这 里 填充 了 一 个 矩 形 区 域 ， 颜 色 由 属性 fillStyle 属性 来 设置 。 


在 网 页 中 绘制 矩形 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 5 章 \5-2-2.html 。 视频 : 光盘 \ 视 频 \ 第 5 章 \5-2-2.mp4 


[ae 打开 页 面 “ 光 盘 \ 源 文件 \ 第 5 章 \5-2-2.html”， 页 面 效果 如 图 5-6 所 示 。 转 换 到 代 
码 视图 中 , 在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 , 并 对 相关 属性 进行 设置 , 如 图 5-7 
所 示 。 








CT am 总 nmE ieeemm 此 <!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<titte> 在 网 页 中 绘制 矩形 </titte> 

<Link href="style/5-2-2.css" rel="stylesheet" 
type="text/css"> 














</head> 
<body> 
<canvas id="canvasl" width="960" height="320"> 
RI 浊 欠 本 个 芭 持 该 了 用 < /canvas> 
</body> 
</html> 
图 5-6 图 5-7 


[ 咪 国 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 
var myCanvas=document .getElementByid("canvas1"); 


Var context=myCanvas .getContext ("2d"); 


// 绘制 矩形 边框 

context.strokeSstyle="#FFF"; // 设置 边框 颜色 
context.lineWidth=5; // 设置 边框 宽度 
context.strokeRect (0,0,850,300); // 绘制 矩形 边框 
// 填充 矩形 区 域 

Context .fillstyle="#99CEDA"; // 设置 填充 颜色 
context.-fill1Rect(3,3v845,295) 7 // 填充 矩形 区 域 
</script> 


E 世 一 保 存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 使 用 <canvas> 标签 与 JavaScript 脚本 相 结 合 
绘制 的 矩形 效果 ， 如 图 5-8 所 示 。 
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图 5-8 


除了 本 节 介 绍 的 两 个 与 矩形 有 关 的 方法 ( 绘制 矩形 边框 和 填充 矩形 区 域 ) 外 ， 还 有 一 个 方法 
clearRect， 通 过 该 方法 ， 可 以 擦 除 指定 的 矩形 区 域 ， 使 其 变 为 透明 。 使 用 方法 如 下 。 


Context .clearRect (x,y,width,height); 


该 方法 的 4 个 参数 与 strokeRect() 方法 和 fillrect() 方法 的 参数 意义 是 一 样 的 。 


圆 形 的 绘制 是 采用 绘制 路 径 并 填充 颜色 的 方法 来 实现 的 。 路 径 会 在 实际 绘图 前 勾勒 出 图 形 的 轮廓， 
这 样 就 可 以 绘制 复杂 的 图 形 。 

在 canvas 中 ， 所 有 基本 图 形 都 是 以 路 径 为 基础 的 ， 通 常会 调用 linTo()、rect()、arc 等 方法 来 
设置 一 些 路 径 。 在 最 后 使 用 人 i() 或 stroke() 方法 进行 绘制 边框 或 填充 区 域 时 ， 都 是 参照 这 个 路 径 来 
进行 的 。 使 用 路 径 绘图 基本 上 分 为 如 下 3 个 步骤 。 

(1) 创建 绘图 路 径 。 

(2) 设置 绘图 样式 。 

(3) 绘制 图 形 。 

》1. 创建 绘图 路 径 

创建 绘图 路 径 常会 用 到 两 个 方法 beginPath() 和 closePath()， 分 别 表示 开始 一 个 新 的 路 径 和 关 
闭 当前 的 路 径 。 首 先 , 使 用 beginPath() 方 法 创建 一 个 新 的 路 径 。 该 路 径 是 以 一 组 子路 径 的 形式 存储 的 ， 
它们 共同 构成 一 个 图 形 。 每 次 调用 beginPath() 方法 ， 都 会 产生 一 个 新 的 子路 径 。bgginPath() 的 使 
用 方法 如 下 。 


context .beginPath() 7 


接着 就 可 以 使 用 多 种 设置 路 径 的 方法 ， 绘 图 API 为 用 户 提供 了 多 种 路 径 方法 ， 如 图 5-2 
所 示 。 


Qs 





表 常用 路 径 方法 


说 明 
最 好 使 用 closePath() 方法 关闭 当前 路 径 ， 使 用 方法 如 下 。 







x 和 y ee 绘图 开始 的 坐标 

X 和 y 确定 了 直线 路 径 的 终点 坐标 ”绘制 直线 到 终点 坐标 

Xx 和 y 设置 圆 形 的 圆心 坐标 ; radius 使 用 一 个 中 心 点 和 半径 ， 为 一 个 画布 的 
设置 圆 形 的 半径 ; startAngle 设置 圆 当前 路 径 添 加 一 条 弧 线 。 圆 形 为 弧 形 的 
弧 开始 点 的 角度 ; endAngle 设置 圆 弧 特例 

结束 点 的 角度 ; counterclockwise 

逆 时 针 方 向 true， 顺 时 针 方 向 false 

Xx 和 y 设置 矩形 起 点 坐标 ; width 和 矩 形 路 径 方法 

height 设置 矩形 的 宽度 和 高 度 


context .closePath () 7 


它 会 尝试 用 直线 连接 当前 端点 与 起 始 端点 来 闭合 当前 路 径 ， 但 是 如 果 当 前 路 径 已 经 闭合 或 者 只 有 
一 个 点 ， 则 什么 都 不 做 。 
》 2. 设置 绘图 样式 

设置 绘图 样式 包括 边框 样式 和 填充 样式 ， 其 形式 如 下 。 

(1) 使 用 strokeStyle 属性 设置 边框 颜色 ， 代 码 如 下 。 


context .strokestyle="#000"; 

(2) 使 用 lineWidth 属性 设置 边框 宽度 ， 代 码 如 下 。 
context .lineWidth=3; 

(3) 使 用 人 lStyle 属性 设置 填充 颜色 ， 代 码 如 下 。 


context.fillstyle="#F90"; 


》 3. 绘制 图 形 
路 径 和 样式 都 设置 好 了 ， 最 好 就 是 调用 方法 stroke() 绘制 边框 ， 或 调用 方法 fl() 填充 区 域 ， 代 
码 如 下 。 


context .stroke(); // 绘制 边框 
context.fill(); ”// 填充 区 域 


经 过 以 上 的 操作 ， 图 形 才 绘制 到 canvas 对 象 中 。 


在 网 页 中 绘制 圆 形 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 5 章 \5-2-3.html 视频: 光盘 \ 视 频 \ 第 5 章 \5-2-3.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 5 章 \5-2-3.html”, 页 面 效果 如 图 5-9 所 示 。 转换 到 代码 视图 中 ， 
在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 ， 并 对 相关 属性 进行 设置 ， 如 图 5-10 所 示 。 
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到 - <!doctype html> 
i <html> 

<head> 

<meta charset="utf-8"> 

<title> 在 网 页 中 绘制 圆 形 </title> 

<link href="style/5-2-3.css" rel="stylesheet" 

type="text/css"> 

</head> 

<body> 


<canvas id="canvasl" width="969" height="569"> 











LE 这 XJJAE</ Canvas> 
</body> 
</html> 
图 5-9 图 5-10 


[王国 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 


[EE 保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 使 用 <canvas> 标签 与 JavaScript 脚本 相 结合 


<script type="text 


/javascript"> 
Var myCanvas=document .getElementByid("canvas1"); 


Var context=myCanvas .getContext ("2d"); 


// 创建 绘图 路 径 

context .beginPath(); // 创建 新 路 径 
context.arc(380,250,200,0,Math.PI*2,true); // 圆 形 路 径 
context .closePath () // 闭合 路 径 

// 设置 样式 


context.strokeStyle="#FFF"; // 设置 边框 颜色 
context .lineWidth=10; // 设置 边框 宽度 
context.fillstyle="#EDB5C0"; ”// 设置 填充 颜色 


// 绘制 图 形 
context.stroke(); 
context .fill(); 


</script> 


// 绘制 边框 
// 绘制 填充 


绘制 的 圆 形 效果 ， 如 图 5-11 所 示 。 





图 5-11 


并 且 为 该 圆 形 设置 了 边框 和 填充 。 





在 JavaScript 脚本 代码 中 ， 使 用 
arc() 方法 创建 一 个 圆 形 路 径 ， 设 置 了 
其 x 轴 和 y 轴 的 位 置 和 正 圆 形 的 半径 ， 


三 角形 同样 需要 通过 绘制 路 径 的 方法 来 实现 ， 了 解 了 前 面 讲解 的 绘制 图 形 的 相关 方法 和 属性 ， 使 
用 绘制 路 径 的 方法 就 能 够 自由 地 绘制 出 其 他 形状 图 形 ， 本 节 将 带领 读者 在 网 页 中 绘制 一 个 三 角形 。 


在 网 页 中 绘制 三 角形 


最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 \5-2-4.html 。 视频 : 光盘 \ 视 频 \ 第 5 章 \5-2-4.mp4 


[GE 打开 页 面 “光盘 \ 源 文件 \ 第 5 章 \5-2-4.html”, 页 面 效果 如 图 5-12 所 示 。 转 换 到 代码 视图 中 ， 
在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 ， 并 对 相关 属性 进行 设置 ， 如 图 5-13 所 示 。 











<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 在 网 页 中 绘制 三 角形 </title> 

<Link href="style/5-2-4.css" rel="stylesheet" 
type="text/css"> 


</head> 
<body> 
<canvas jd="canvasl" width="900" height="500"> 
你 的 刘 芝 器 不 去 持 该 功能 </canvas> 
</body> 
| </html> 








图 5-12 


葬 i 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 


图 5-13 


Var myCanvas=document .getElementByid("canvas1"); 


Var context=myCanvas.getContext ("2d"); 


// 创建 绘图 路 径 

context .beginpath(); // 创建 新 路 径 
context .moveTo (0,0); // 确定 起 始 坐标 
context.lineTo(500,0); // 目标 坐标 
context.lineTo (0,500); // 目标 坐标 
context .closePath (); // 闭合 路 径 

// 设置 样式 

context .fillstyle="#6E7376"; ”// 设置 填充 颜色 
// 绘制 图 形 

context .fill(); // 绘制 填充 
</script> 


辐 轴 | 保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 使 用 <canvas> 标签 与 JavaScript 脚本 相 结 合 


绘制 的 三 角形 效果 ， 如 图 5-14 所 示 。 
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图 5-14 


closePath() 方法 习惯 性 地 放 在 路 径 设置 的 最 后 一 步 ， 切 勿 认为 是 路 径 设置 的 结 
束 ， 因 为 在 此 之 后 ， 还 可 以 继续 设置 路 径 。 





通常 情况 下 ， 会 把 一 个 图 形 绘制 在 另 一 个 图 形 之 上 ， 称 为 图 形 组 合 。 默 认 的 情况 是 上 面 的 图 形 履 
盖 了 下 面 的 图 形 ， 这 是 由 于 图 形 组 合 默认 地 设置 了 source-over 属性 值 。 

在 canvas 中 ， 可 通过 globalCompositeOperation 属性 来 设置 如 何在 两 个 图 形 夫 加 的 情况 下 
组 合 颜 色 ， 其 用 法 如 下 。 


globalCompositeOperation= [value]; 


参数 value 的 合法 值 有 12 个 ， 决 定 了 12 种 图 形 组 合 类 型 ， 默 认 值 是 source-over。12 种 组 
合 类 型 如 表 5-3 所 示 。 


表 5-3 组 合 类 型 值 的 说 明 
es 
[CD 只 绘制 新 图 形 ， 删 除 其 他 所 有 内 容 
[在 图 形 重要 的 地 方 ， 颜 色 由 两 个 颜色 值 相 减 后 决定 
[ETationealop 己 有 的 内 容 只 在 它 和 新 的 图 形 重 委 的 地 方 保留 ， 新 图 形 绘制 于 内 容 之 后 
aestnaia 厨 时 在 新 图 形 以 及 已 有 画布 重 区 的 地 方 ， 已 有 内 容 都 保留 ， 所 有 其 他 内 容 成 为 透明 的 
Gemmaians60 在 已 有 内 容 和 新 图 形 不 重 权 的 地 方 ， 已 有 内 容 保留 ， 所 有 其 他 内 容 成 为 透明 的 
gestination=over | 新 图 形 绘制 于 已 有 内 容 的 后 面 
而 5 在 图 形 重 友 的 地 方 ， 颜 色 由 两 种 颜色 值 的 加 值 来 决定 
[SGUTeesatop 只 有 在 新 图 形 和 已 有 内 容重 二 的 地 方 ， 才 绘制 新 图 形 
[SUCesn 只 有 在 新 图 形 和 已 有 内 容重 本 的 地 方 ， 新 图 形 才 绘 制 ， 所 有 其 他 内 容 成 为 透明 的 
60r5e=0 | 只 有 在 和 已 有 图 形 不 重生 的 地 方 ， 才 绘制 新 图 形 
[GUOVen 新 图 形 绘制 于 已 有 图 形 的 项 部 ， 这 是 默认 的 行为 
ROLL 在 重要 和 正常 绘制 的 其 他 地 方 ， 图 形 都 成 为 透明 的 


Qn 


例如 ， 编 写 下 面 的 JavaScript 脚本 代码 。 


函数 RectArc(context) 是 用 来 绘制 组 合 图 形 的 ， 使 用 方法 translate() 移动 不 同 的 位 置 ， 连 续 绘 
制 4 种 组 合 图 形 : source-over、lighter、xor、destination-over。 在 浏览 器 中 预览 ， 可 以 看 到 代 
码 中 设置 的 4 组 合 的 表现 方式 ， 如 图 5-15 所 示 。 















closePath() 方法 习惯 性 地 放 在 路 径 设 
置 的 最 后 一 步 ， 切 勿 认为 是 路 径 设置 的 结 
束 ， 因 为 在 此 之 后 ， 还 可 以 继续 设置 路 径 。 


图 5-15 





在 实际 的 绘图 中 ， 绘 制 曲线 是 常用 的 一 种 绘图 形式 。 在 设置 路 径 的 时 候 ， 需 要 使 用 一 些 曲 线 方法 
来 勾勒 出 曲线 路 径 ， 以 完成 曲线 的 绘制 。 在 canvas 中 ， 绘 图 API 提供 了 多 种 曲线 的 绘制 方法 ， 主 要 
的 曲线 绘制 方法 有 arc()、arcTo()、quadraticCurveTo() 和 bezierCurveTo()。 


在 前 面 已 经 讲解 了 如 何 使 用 arc() 方法 绘制 圆 形 ，arc() 方法 是 使 用 中 心 点 和 半径 ， 为 一 个 
canvas 对 象 的 当前 路 径 添加 一 条 弧 线 ， 其 使 用 方法 如 下 。 


arc(x,y,radius,startAngle,endAngle,counterclockwise); 


x 和 y 描 述 弧 的 圆 形 的 圆心 坐标 radius 描述 弧 的 圆 形 的 半径 startAngle 是 圆 弧 的 开始 点 的 角度 
endAngle 是 圆 弧 的 结束 点 的 角度 ; counterclockwise 逆 时 针 方向 为 rue， 顺 时 针 方向 为 false。 

如 图 5-16 所 示 ， 圆 心 由 参数 x 和 y 来 确定 ， 半 径 由 参数 radius 确定 ， 圆 弧 的 开始 点 的 角度 
startAngle 和 结束 点 的 角度 endAngle 如 图 中 所 示 ， 体 现 的 是 一 个 逆 时 针 方向 的 绘制 。 


endAngle| 


圆心 


图 5-16 





[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 5 章 \5-3-1.html”， 页 面 效 果 如 图 5-17 所 示 。 转 换 到 代 
码 视图 中 ,在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标 签 ,并 对 相关 属性 进行 设置 ,如 图 5-18 
所 示 。 





<1doctype html> 
<html> 

<head> 

<meta charset="utf-8 

<ti ee tle> 


<Link hre 作 stytLe/ rel="stylesheet 











= |</html> 


图 5-17 图 5-18 
[ 哎 国 ”在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 











[gaE 王 ”保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 通过 中 心 点 和 半径 绘制 弧 线 的 效果 ， 如 图 5-19 
所 示 。 
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图 5-19 


为 了 更 好 地 说 明 , 同时 绘制 一 个 灰色 的 圆 形 , 圆 形 的 圆心 坐标 和 半径 与 弧 线 相同 ， 

弧 线 的 线条 宽 20 像素 ， 线 条 颜色 为 楼 色 。 在 绘制 弧 线 的 时 候 ， 仅 使 用 arc() 方法 就 

完成 路 径 的 设置 ， 与 其 他 路 径 的 绘制 一 样 ， 需 要 先 设 置 填充 样式 或 边框 样式 ， 最 后 
执行 填充 或 绘制 。 


arcTo() 方法 是 使 用 切线 的 方法 绘制 弧 线 ， 使 用 两 个 目标 点 和 一 个 半径 ， 为 当前 的 子路 径 添加 一 
条 弧 线 。 与 arc() 方法 相 比 ， 同 样 是 绘制 弧 线 ， 绘 制 思路 和 侧重 点 不 同 。arcTo() 的 使 用 方法 如 下 。 


arcTo (xl, yl,x2,y2,radius); 


x1 和 y1 描述 了 一 个 坐标 点 ， 用 p1 表示 。x2 和 y2 描 P1 
述 另 一 个 坐标 点 ， 用 p2 表示 。radius 描述 弧 的 圆 形 的 半径 。 
如 图 5-20 所 示 ， 有 一 个 绘制 的 起 点 ( 即 当前 位 置 ) ， 通 常 
会 使 用 moveTo() 方法 来 指定 。p1 点 由 参数 x1 和 y1 确定 。 
p2 点 由 参数 x2 和 y2 确定 。 半 径 由 参数 radius 确定 。 

添加 给 路 径 的 圆 弧 是 具有 指定 radius 的 圆 的 一 部 分 。 
圆 弧 有 一 个 点 与 起 点 到 p1 的 线段 相 切 ， 还 有 一 个 点 和 从 p1 
到 p2 的 线段 相 切 。 这 两 个 切 点 就 是 圆 弧 的 起 点 和 终点 ， 
弧 绘 制 的 方向 就 是 连接 这 两 个 点 的 最 短 圆 弧 的 方向 。 





图 5-20 


通过 辅助 线 绘制 弧 线 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 \5-3-2.html 。 视频 : 光盘 \ 视 频 \ 第 5 章 \5-3-2.mp4 


[GE 打开 页 面 “光盘 \ 源 文件 \ 第 5 章 \5-3-2.html”, 页 面 效果 如 图 5-21 所 示 。 转 换 到 代码 视图 中 ， 


在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 ， 并 对 相关 属性 进行 设置 ， 如 图 5-22 
所 示 。 


Gn 





<!doctype htmL> 
|<html> 

<head> 
<meta charset="utf-8"> 
<tittLe> 通 过 辅助 线 绘制 绪 线 </titte> 
<Link href=" 1 -3-2.css" rel="styl 
type="te 
</head> 









<body> 





</body> 
</html> 














图 5-21 图 5-22 


[ 王 对 ”在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 





[GE 玫 保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 通过 辅助 线 绘制 弧 线 的 效果 ， 如 图 5-23 
所 示 。 
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图 5-23 


助 线段 也 会 绘制 出 来 。 在 绘制 弧 线 的 时 候 ， 先 通过 moveTo() 方法 确定 了 绘制 起 点 ， 


由 于 该 绘制 弧 线 的 方法 是 通过 与 辅助 线段 相 切 来 完成 的 ， 所 以 与 弧 线 相 切 的 辅 
四 该 起 点 会 与 圆 弧 的 第 一 个 切 点 连接 起 来 。 





二 次 样 条 曲线 是 曲线 的 一 种 ，canvas 绘图 API 专门 提 
供 了 此 曲线 的 绘制 方法 。quadraticCurveTo() 方法 为 当前 
的 子路 径 添 加 一 条 二 次 样 条 曲线 ， 其 使 用 方法 如 下 。 


控制 点 


quadraticCurveTo (cpX, cpY, Xx, y); 


CpX 和 cpY 描述 了 控制 点 的 坐标 ，x 和 y 描述 了 曲线 的 
终点 坐标 。 

如 图 5-24 所 示 ， 起 点 即 当前 的 位 置 ， 控 制 点 由 参数 
cpX 和 cpY 确定 ， 终 点 由 参数 x 和 y 确定 。 所 绘制 的 曲线 
就 是 从 起 点 连接 到 终点 ， 而 控制 点 可 以 控制 起 点 和 终点 之 间 
的 曲线 的 形状 。 


起 点 终点 
图 5-24 


绘制 二 次 样 条 曲线 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 \5-3-3.html 。 视频 : 光盘 \ 视 频 \ 第 5 章 \5-3-3.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 5 章 \5-3-3.html”， 页 面 效 果 如 图 5-25 所 示 。 转 换 到 代 
码 视图 中 , 在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 , 并 对 相关 属性 进行 设置 , 如 图 5-26 
所 示 。 





ldoctype html> 
<html> 

<head> 

<meta charset="uUtf-8"> 
<title> 绘 制 二 次 样 条 曲线 </titte> 

<link href="style/5-3-3.css" rel="stylesheet" 
type="text/css"> 

</head> 


<body> 
<canvas id="canvasl" width="900" height="6een>| 
你 的 并 加 不 去 持 该 功能 <J canvas> 

















图 5-25 5-26 


[ 王 于 ”在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 





[ga 国保 存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 所 绘制 的 二 次 样 条 曲线 的 效果 ， 如 图 5-27 所 示 。 








5-27 
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由 于 该 方法 使 用 了 两 个 坐标 点 ， 我 们 将 这 两 个 坐标 点 用 直线 连接 起 来 ， 以 辅助 
提示 理解 。 在 绘制 曲线 的 时 候 ， 通 过 moveTo() 方法 确定 绘制 起 点 ， 使 用 曲线 连接 起 点 
全 ”和 终点 ， 曲 线 的 弯曲 形状 由 控制 点 控制 。 


canvas 绘图 API 也 提供 了 贝 赛 尔 曲 线 的 绘制 方法 bezierCurveTo()， 贝 赛 尔 曲线 是 应 用 于 二 维 
图 形 应 用 程序 中 的 数学 曲线 。 与 二 次 样 条 曲线 相 比 ， 贝 赛 尔 曲线 使 用 了 两 个 控制 点 ， 从 而 可 以 创建 更 
复杂 的 曲线 图 形 。bezierCurveTo() 的 使 用 方法 如 下 。 控制 点 1 控制 点 2 


bezierCurveTo (cplX, cplY, cp2X, cp2Y,x,y); 


cp1X 和 cp1Y 描述 了 第 一 个 控制 点 的 坐标 ，cp2X 和 
cp2Y 描述 了 第 二 个 控制 点 的 坐标 ，x 和 y 描述 了 曲线 的 终 
点 坐标 。 

如 图 5-28 所 示 ， 起 点 即 当前 的 位 置 ， 控 制 点 1 由 参 刀 
数 ou 和 cp1Y 确定 ， 控 制 点 2 由 参数 cp2X 和 cpaY < 


确定 ， 终 点 由 参数 x 和 y 确定 。 所 绘制 的 曲线 是 从 起 点 连 终点 
Rs 由 两 个 控制 点 联合 控制 的 曲线 形状 。 图 5-28 
绘制 贝 赛 尔 曲线 


最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 ,5-3-4.html ”视频 : 光盘 \ 视 频 \ 第 5 章 \5-3-4.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 5 章 \5-3-4.html”, 页 面 效果 如 图 5-29 所 示 。 转 换 到 代码 视图 中 ， 
在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 ， 并 对 相关 属性 进行 设置 ， 如 图 5-30 所 示 。 





CI 二 邮 _samarat 四 


| [<!doctype html> 
| | -htm 
| |<head> 

<meta charset="utf-8"> 
<titte> 绘 制 风 赛 尔 曲线 </titte> 

<Link href="style/5-3-4.css" rel="stylesheet" 
| type="text/css"> 
| 




















| |</head> 
<body> 
CanVas jd="canvasl" width="9080" height="666"> 
体 的 个 支持 RE</canvas> 
</body> 
aye |</html> 
图 5-29 图 5-30 


E 权 一 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 





[GBS 保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 所 绘制 的 贝 赛 尔 曲 线 的 效果 ， 如 图 5-31 所 示 。 








5-31 
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使 用 HTML 5 中 新 增 的 <canvas> 标签 除了 可 以 绘制 基本 的 图 形 以 外 ， 还 可 以 绘制 出 文字 的 
效果 ， 在 本 节 中 将 向 读者 介绍 如 何 使 用 <canvas> 标签 与 JavaScript 脚本 相 结 合 在 网 页 中 绘制 文 
字 效 果 。 


通过 <canvas> 标签 ， 可 以 使 用 填充 的 方法 绘制 文本 ， 也 可 以 使 用 描 边 的 方法 绘制 文本 ， 在 绘制 
文本 之 前 ， 还 可 以 设置 文字 的 字体 样式 和 对 齐 方式 。 绘 制 文本 有 两 种 方法 ， 即 填充 绘制 方法 fillText() 
和 描 边 绘制 方法 strokeText()， 其 使 用 方法 如 下 。 


fillText (text,x,y,maxwidth); 


strokeText (text,x,y,maxwidth); 


参数 text 表示 需要 绘制 的 文本 ; 参数 x 表示 绘制 文本 的 起 点 x 轴 坐 标 ; 参数 y 表示 绘制 文本 的 
起 点 y 轴 坐 标 ;参数 maxwidth 为 可 选 参数 ， 表 示 显 示 文本 的 最 大 宽度 ， 可 以 防止 文本 溢出 。 

在 绘制 文本 之 前 ， 可 以 先 对 文本 进行 样式 设置 。 绘 图 API 提供 了 专门 用 于 设置 文本 样式 的 属性 ， 
可 以 设置 文本 的 字体 、 大 小 等 ， 类 似 于 CSS 的 字体 属性 。 也 可 以 设置 对 齐 方式 ， 包 括 水 平方 向 上 的 
对 齐 和 垂直 方向 上 的 对 齐 。 文 本 相关 属性 如 表 5-4 所 示 。 


表 5-4 文本 的 相关 属性 
es 
Fn css 字 体 样式 字符 中 设置 字体 样式 
[in staryendleftyrighycenter 设置 水 平 对 齐 方式 ， 默 认为 start 
RE top/hanging/middle/alphabetic/bottom ， 设置 垂直 对 齐 方式 ， 默 认为 alphabetic 








在 网 页 中 绘制 文字 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 5 章 \5-4-1.html 。 视频; 光盘 \ 视 频 \ 第 5 章 \5-4-1.mp4 


I 打开 页 面 “光盘 \ 源 文件 \ 第 5 章 \5-4-1.html”, 页 面 效果 如 图 5-32 所 示 。 转 换 到 代码 视图 中 ， 
在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 ， 并 对 相关 属性 进行 设置 ， 如 图 5-33 所 示 。 


CITE 二 上 jiecass 有 








<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 在 网 页 中 绘制 文字 </title> 

| | <Link href="style/5-4-1.css" rel="stylesheet" 
type="text/css"> 

</head> 


GINVENTORY 


<body> 
<canvas id="canvasl" width="966" height="366"> 
NiFAU RE</ canvas> 





aa the perfect serve 





NE 
</body> 
</html> 

















图 5-32 图 5-33 


葬 z ”转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 #canvas1 的 CSS 样式 ， 如 图 
5-34 所 示 。 返 回 网 页 设计 视图 中 ， 使 刚 添加 的 id 名 称 为 canvas1 的 canvas 元 素 定位 在 页 面 水 平 
居中 的 位 置 ， 如 图 5-35 所 示 。 


























position: absolute 
top: Opx 
left: 50% 
margin-left: -450px ee 
二 EI 
图 5-34 图 5-35 


国 3 蜀 ”返回 网 页 HTML 代码 中 ， 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 

Var myCanvas=document .getElementByid("canvas1"); 
Var context=myCanvas.getContext ("2d"); 

// 填充 方式 绘制 文本 

context .fillStyle="#F6CC4C"; 

context.font="bold 60px 微软 雅 黑 "; 

context .fillText (" 欢迎 光临 我 们 的 网 站 | ",100,100); 
// 描 边 方式 绘制 文本 

context.strokeStyle="#666666"; 

context .font="bold italic 60px 微软 雅 黑 "; 

context .strokeText (" 欢迎 光临 我 们 的 网 站 | ",100,200); 


</script> 


”保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 使 用 <canvas> 标签 与 JavaScript 脚本 相 结 合 
绘制 的 填充 文字 和 描 边 文字 的 效果 ， 如 图 5-36 所 示 。 
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font 属性 设置 了 文本 样式 : 字体 为 “微软 雅 黑 ”、 字 体 加 粗 效 果 bold、 文 字 大 
小 为 60px、 字 体 倾斜 效果 italic。 其 填充 样式 仍然 使 用 fillStyle 来 设置 ， 描 边 样式 仍 
然 使 用 strokeStyle 来 设置 。 





有 些 时 候 ， 开 发 人 员 需 要 知道 所 绘制 的 文本 的 宽度 ， 以 方便 进行 布局 。 绘 图 API 提供 了 获取 绘 
制 文本 宽度 的 方法 ，measureText() 方法 就 是 用 来 获取 文本 宽度 的 ， 其 使 用 方法 如 下 。 


measureText (text); 


参数 text 表示 所 要 绘制 的 文本 。 该 方法 返回 一 个 TextMetrics 对 象 ， 表 示 文 本 的 空间 度量 ， 可 
以 通过 该 对 象 的 width 属性 获取 文本 的 宽度 。 


获取 所 绘制 文字 的 宽度 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 \5-4-2.html 。 视频 : 光盘 \ 视 频 \ 第 5 章 \5-4-2.mp4 


I ”打开 页 面 “光盘 \ 源 文件 \ 第 5 章 \5-4-2.html”, 页 面 效 果 如 图 5-37 所 示 。 转 换 到 代码 视图 中 ， 
可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 5-38 所 示 。 


| 可 旺 wnwaapai i 





| | <!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 获 取 所 绘制 文字 的 宽度 </title> 

<Link href="style/5-4-2.css" rel="stylesheet" 
type="text/css"> 
TT </head> 





<body> 

<canvas id="canvasl" width="996" height="360"> 
你 的 浏览 器 不 支持 该 功能 </canvas> 

</body> 

zi [</html> 


图 5-37 图 5-38 


[到 红 ”在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 

















<script type="text/javascript"> 

Var myCanvas=document .getElementByid("canvas1"); 
Var context=myCanvas.getContext ("2d"); 

// 填充 方式 绘制 文本 

context .fillStyle="#F6CC4C"; 

context .font="bold 60px 微软 雅 黑 "; 

// 根据 已 设置 的 文本 样式 度量 文本 

var tm=context .measureText (" 欢迎 光临 我 们 的 网 站 ! "); 
context .fillText (" 欢迎 光临 我 们 的 网 站 ! ",100,100); 


context .fillText (tm.width,tm.width+100,100); 


Ga 


// 描 边 方式 绘制 文本 

context .strokeStyle="#666666"; 

context .font="bold italic 60px impact"; 

// 根据 已 设置 的 文本 样式 度量 文本 

Var tm=context.measureText ("Hello Welcome!"); 
context.strokeText ("Hello Welcome!",100,200); 
context.strokeText (tm.width,tm.width+100,200); 


</script> 


葬 畏 保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 所 绘制 的 文本 度量 宽度 的 效果 ， 如 图 5-39 
所 示 。 


欢迎 光临 我 们 的 网 站 ! 600 


GIN VESNETeGSR Y 

度量 文本 是 以 当前 设置 的 文本 样式 为 基础 
的 ， 即 文本 样式 确定 之 后 ， 即 可 获取 文本 的 度 
量 ， 不 需要 等 待 绘制 文本 完成 后 再 去 度量 。 





阴影 效果 可 以 增加 图 像 的 立体 感 ， 为 所 绘制 的 图 形 或 文字 添加 阴影 效果 ， 可 以 利用 绘图 API 提 
供 的 绘制 阴影 的 属性 。 阴 影 属性 不 会 单独 去 绘制 阴影 ， 只 需要 在 绘制 任何 图 形 或 文字 之 前 ， 添 加 阴影 
属性 ， 就 能 绘制 出 带 有 阴影 效果 的 图 形 或 文字 。 

如 表 5-5 所 示 为 设置 阴影 的 4 个 属性 。 


表 5-5 阴影 属性 
说 明 
shadowColor ”““” “符合 CSS 规范 的 颜色 什 可 以 使 用 半 透 明 颜色 
shadowOffsetX ”数值 阴影 的 横向 位 移 量 ， 向 右 为 正 ， 向 左 为 负 
shadowOffsetY 数值 阴影 的 纵向 位 移 量 ， 向 下 为 正 ， 向 上 为 负 
shadowBlur ” “数值 高 斯 模糊 ， 值 越 大 ， 阴 影 边 缘 越 模糊 
在 网 页 中 绘制 文字 并 添加 阴影 


最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 \,5-4-3.html 视频: 光盘 \ 视 频 \ 第 5 章 \5-4-3.mp4 


UB 打开 页 面 “ 光 盘 \ 源 文件 \ 第 5 章 \5-4-3.html”, 页 面 效 果 如 图 5-40 所 示 。 转 换 到 代码 视图 中 ， 
可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 5-41 所 示 。 
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<meta charset="utf-8"> 

<title> 在 网 页 中 绘制 文字 并 添加 阴影 </title> 

<Link href="style/5-4-3.css" rel="stylesheet" 
type="text/css"> 

</head> 


<body> 

<canvas id="canvasl" width="969" height="360"> 
你 的 浏览 器 不 支持 该 功能 </canvas> 

</body> 

</html> 








5-40 


图 5-41 


吨 岂 ”在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 





[a 本 ”保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 所 绘制 的 图 形 和 文本 添加 阴影 的 效果 ， 如 图 5-42 


所 示 。 











5-42 


@a 





在 绘制 文本 和 图 形 之 前 ， 设 置 了 阴影 属性 ， 其 后 所 绘制 的 所 有 文本 和 图 形 都 会 
附带 阴影 效果 。 阴 影 属性 可 以 应 用 于 任何 绘制 的 图 像 中 ， 也 包括 图 片 。 





有 了 时候， 可 能 需要 借助 一 些 图 片 素材 ， 使 绘图 更 加 灵活 和 方便 。 在 canvas 中 ， 绘 图 API 已 经 
提供 了 插入 图 像 的 方法 ， 只 需要 几 行 代码 就 能 将 图 像 绘制 到 画布 上 。 


渐变 是 一 种 很 普遍 的 视觉 形象 ， 能 带 来 视觉 上 的 舒适 感 。 在 canvas 中 ， 绘 图 API 提供 了 两 个 
原生 的 渐变 方法 ， 包 括 线性 渐变 和 径 向 渐变 ， 可 以 应 用 在 描 边 样式 和 填充 样式 中 。 

使 用 渐变 需要 三 个 步骤 : 首先 是 创建 渐变 对 象 ， 其 次 是 设置 渐变 颜色 和 过 渡 方式 ; 最 后 将 渐变 对 
象 赋值 给 填充 样式 或 描 边 样式 。 

线性 渐变 是 指 起 始点 和 结束 点 之 间 线 性 的 内 插 颜 色 值 。 绘 图 API 提供 的 创建 线性 渐变 的 方法 是 
createLinearGradient()， 该 方法 的 使 用 格式 如 下 。 


createLinearGradient (xStart, yStart, xEnd, yEnd); 


xStart、yStart 表示 渐变 的 起 始点 的 坐标 。xEnd、yEnd 表示 渐变 的 结束 点 的 坐标 。 返 回 一 个 渐 
变 对 象 。 

设置 渐变 颜色 需要 在 渐变 对 象 上 使 用 addColorStop() 方法 ， 在 渐变 中 的 某 一 点 添加 一 个 颜色 变 
化 ，addColorStop() 方法 的 使 用 格式 如 下 。 


addColorstop (offset, color); 


offset 是 一 个 范围 在 0.0 ~ 1.0 之 间 的 浮 点 值 ， 表 示 渐 变 的 开始 点 和 结束 点 之 间 的 一 部 分 ， 
offset 为 0 对 应 开始 点 ，offset 为 1 对 应 结束 点 。color 是 一 个 颜色 值 ， 表 示 在 指定 offset 显示 
的 颜色 。 


在 网 页 中 绘制 矩形 并 填充 线性 渐变 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 \5-5-1.html 。 视频: 光盘 \ 视 频 \ 第 5 章 \5-5-1.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 5 章 \5-5-1.html”， 页 面 效 果 如 图 5-43 所 示 。 转 换 到 代 


码 视图 中 , 在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 , 并 对 相关 属性 进行 设置 , 如 图 5-44 
所 示 。 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<tittLe> 在 网 页 中 绘制 矩形 并 填充 线性 渐变 </titte> 
<Link href="style/5-5-1.css" rel="stylesheet" 
type="text/css"> 

</head> 


Welcome to ,五 
4 

















图 5-43 图 5-44 


E@ 权 对 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 #canvas1 的 CSS 样式 ， 如 图 
5-45 所 示 。 返 回 网 页 设计 视图 中 ， 使 刚 添加 的 id 名 称 为 canvas1 的 canvas 元 素 定位 在 页 面 水 平 
居中 的 位 置 ， 如 图 5-46 所 示 。 





Welcome to, 
#canvasl { < 
position: absolute; 
top: Opx; 
left: 56%; 


margin-left: -500px; 














图 5-45 图 5-46 
[ 因 缠 返回 网 页 HTML 代码 中 ， 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 

Var myCanvas=document .getElementByid("canvas1"); 
Var context=myCanvas.getContext ("2d"); 

// 创建 线性 渐变 

Var grd=context .createLinearGradient (0,0,1000,0); 
// 设置 渐变 颜色 

grd.addColorstop (0,"#FF9900"); 
grd.addColorstop (1, "#FF3300"); 

// 绘制 矩形 并 将 填充 设置 为 渐变 

context.fillstyle=grd; 

context.fillRect (0,0,1000,80); 


</script> 


国保 存 页 面 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 为 所 绘制 的 矩形 填充 线性 渐变 颜色 的 效果 ,如 图 5-47 
所 示 。 


@a6 


Welcome to , 右 


< 





图 5-47 





从 预览 效果 图 可 以 看 到 起 始点 到 结束 点 的 渐变 是 从 黄 杰 色 到 红榜 色 的 渐变 颜色 ; 
起 始点 到 结束 点 可 以 确定 一 条 线段 ， 渐 变 会 沿 着 该 线段 的 垂直 方向 扩展 。 设 置 渐变 
颜色 和 过 渡 方 式 时 ， 可 以 增加 使 用 addColorStop() 方法 ， 以 便 实现 更 多 颜色 的 线性 
渐变 。 


径 向 渐变 是 指 两 个 指定 圆 的 圆周 之 间 放 射 性 地 表现 颜色 过 渡 效果 。 绘 图 API 提供 的 创建 线性 渐 
变 的 方法 是 createRadialGradient()， 该 方法 的 使 用 格式 如 下 。 


createRadialGradient (xStart, yStart, radiusstart, xEnd, yEnd, radiusEnd); 


xStart 和 yStart 表示 开始 圆 的 圆心 坐标 ; radiusStart 表示 开始 圆 的 半径 ; xEnd 和 yEnd 表示 
结束 圆 的 圆心 坐标 ; radiusEnd 表示 结束 圆 的 半径 。 返 回 一 个 渐变 对 象 gradient。 


在 网 页 中 绘制 圆 形 并 填充 径 向 渐变 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 \5-5-2.html 。 视频; 光盘 \ 视 频 \ 第 5 章 \5-5-2.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 5 章 \5-5-2.html”, 页 面 效果 如 图 5-48 所 示 。 转 换 到 代码 视图 中 ， 
在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 ， 并 对 相关 属性 进行 设置 ， 如 图 5-49 所 示 。 





<1doctype html> 
<html> 

<head> 

<meta charset="utf- 
和 tte 
<link href="style/5-5-2.css" rel="stylesheet" 
type="text/css"> 

</head> 


<body> 

<canvas id="canvasl" width="499" height="400"> 
i 交行 At</canvas> 

RD 

</html> 


















图 5-48 图 5-49 
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转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 , 创建 名 为 #canvas1 的 CSS 样式 , 如 图 5-50 
所 示 。 返 回 网 页 设计 视图 中 ， 使 刚 添加 的 id 名 称 为 canvas1 的 canvas 元 素 定 位 在 页 面 水 平 居 中 的 
位 置 ， 如 图 5-51 所 示 。 





#canvasl { 
position: absolute; 
top: 180px; 
left: 56%; 
margin-left: -200px; 














图 5-50 图 5-51 
吨 畏 ”返回 网 页 HTML 代码 中 ， 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 

Var myCanvas=document .getElementByid("canvas1"); 
Var context=myCanvas.getContext ("2d"); 

// 创建 径 向 渐变 

Var grd=context.createRadialGradient (200,200,0,200,200,200); 
// 设置 渐变 颜色 

grd.addColorstop (0, "#FFFC20"); 
grd.addColorSstop (1, "#FFA100"); 

// 绘制 圆 形 并 将 填充 设置 为 渐变 

context .fillstyle=grd; 

context .beginPath(); 
context.arc(200,200,200,0,Math.PI*2,true); 
context .fill(); 


</script> 


OE 保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 所 绘制 的 圆 形 填充 径 向 渐变 颜色 的 效果 ， 如 图 
5-52 所 示 。 





@as 





始 圆 与 结束 圆 的 中 心 点 重合 ， 设 置 起 始 圆 的 半径 为 0， 即 为 一 个 点 ， 结 束 圆 的 半径 为 


在 本 实例 中 设置 起 始 圆 的 圆心 坐标 与 结束 圆 的 圆心 坐标 为 相同 的 值 ， 则 表示 起 
200， 则 可 以 填充 出 一 个 从 中 心 向 四 周 的 径 向 渐变 。 


使 用 drawlmage() 方法 可 以 将 图 像 添加 到 canvas 画布 中 ， 即 绘制 一 幅 图 像 ， 有 3 种 使 用 方法 。 
(1) 把 整个 图 像 复 制 到 画布 中 ， 将 其 放置 到 指定 的 左上 和 角 坐标 位 置 ， 并 且 将 每 个 图 像 像素 映射 成 
画布 坐标 系统 的 一 个 单元 ， 其 使 用 格式 如 下 。 


drawImage (image, x, y); 


image 表示 所 要 绘制 的 图 像 对 象 ，x 和 y 表示 要 绘制 的 图 像 的 左上 角 的 位 置 。 
(2) 把 整个 图 像 复制 到 画布 中 ， 但 是 允许 用 画布 单位 来 指定 想 要 的 图 像 的 宽度 和 高 度 ， 其 使 用 格 
式 如 下 。 


drawImage (image, x,y,width,height); 


image 表示 所 要 绘制 的 图 像 对 象 ，x 和 y 表示 要 绘制 的 图 像 的 左上 角 的 位 置 ，width 和 height 
表示 图 像 所 应 该 绘制 的 尺寸 ， 指 定 这 些 参 数 使 得 图 像 可 以 缩放 。 

(3) 该 方法 是 完全 通用 的 ， 它 允许 指定 图 像 的 任何 矩形 区 域 并 复制 它 ， 对 画布 中 的 任何 位 置 都 可 
以 进行 任意 缩放 ， 其 使 用 格式 如 下 。 


drawImage (image, sourceX, sourceY, sourceWidth, sourceHeight,destXx,destY,destWidth, 


destHeight); 


image 表示 所 要 绘制 的 图 像 对 象 ，sourceX 和 sourceY 表示 图 像 将 要 被 绘制 的 区 域 的 左上 角 ， 
使 用 图 像 像素 来 度量 ; sourceWidth 和 sourceHeight 表示 图 像 所 要 绘制 区 域 的 大 小 ， 使 用 图 像 像 
素 表示 。destX 和 destY 表示 所 要 绘制 的 图 像 区 域 的 左上 角 的 画布 坐标 ; destWidth 和 destHeight 
表示 图 像 区 域 所 要 绘制 的 画布 大 小 。 

以 上 3 种 方法 中 的 image 参数 都 表示 所 要 绘制 的 图 像 对 象 ， 必 须 是 Image 对 象 或 canvas 元 素 。 
一 个 Image 对 象 能 够 表示 文档 中 的 一 个 <img> 标签 或 者 使 用 Image() 构造 函数 所 创建 的 一 个 屏幕 
外 图 像 。 


使 用 canvas 元 素 绘制 图 像 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 5 章 \5-5-3.html 视频: 光盘 \ 视 频 \ 第 5 章 \5-5-3.mp4 


[GE 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 HTML 5 文档 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 5 
章 \5-5-3.html”， 如 图 5-53 所 示 。 转 换 到 代码 视图 中 ， 在 <body> 与 </body> 标签 之 间 添 加 
<canvas> 标签 ， 并 对 相关 属性 进行 设置 ， 如 图 5-54 所 示 。 


39 加 


























去 <1doctype html> 
es <html> 
3 Fo: <head> 
<meta charset="utf-8"> 
<title> 使 用 canvas 元 素 绘制 图 像 </title> 
-= </head> 
3 <body> 
me 2 <Canvas id="canvas1l" width="1669"”height="625"> 
] 剂 页 酷 个 文 持 壤 功 陛 </canvas> 
[boomy 
J CCERED </html> 
图 5-53 图 5-54 


王国 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 
Var myCanvas=document .getElementByid("canvas1"); 
Var context=myCanvas.getContext ("2d"); 


// 使 用 Image () 构造 函数 创建 图 像 对 象 


Var newImg=new Image () 


newImg.src="images/55301.jpg"; // 指定 图 像 的 文件 地 址 
newImg.onload=function() { 
context .drawImage (newImg, 0,0); // 从 左上 角 开 始 绘 制图 像 


} 
</script> 


E 王 一 保 存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 使 用 <canvas> 标签 与 JavaScript 脚本 代码 相 
结合 绘制 图 像 的 效果 ， 如 图 5-55 所 示 。 





图 5-55 





在 插入 图 像 之 前 ， 需 要 考虑 图 像 加 载 时 间 。 如 果 图 像 没有 加 载 完成 就 已 经 执行 
了 drawlmage() 方法 , 则 不 会 显示 任何 图 片 。 为 图 像 对 象 添加 了 onload 处 理 函 数 ， 
从 而 保证 在 图 像 加 载 完成 之 后 执行 drawlmage() 方法 。 


@@o9o 


在 路 径 绘图 中 使 用 了 两 种 绘图 方法 , 即 用 于 绘制 线条 的 stroke() 方法 和 用 于 填充 区 域 的 仙 () 方法 。 
关于 路 径 的 处 理 ， 还 有 一 种 方法 叫 作 裁 切 方法 clip()。 

说 起 裁 切 ， 大 多 数 人 会 想到 裁 切 图 片 ， 即 保留 图 片 的 一 部 分 。 裁 切 区 域 是 通过 路 径 来 确定 的 。 
和 绘制 线条 的 方法 和 填充 区 域 的 方法 一 样 ， 也 需要 预先 确定 绘图 路 径 ， 再 执行 裁 切 区 域 路 径 方法 
clip()， 这 样 就 确定 了 裁 切 区 域 。 裁 切 区 域 的 使 用 方法 如 下 。 





clip(); 
该 方法 没有 参数 ， 在 设置 路 径 之 后 执行 。 


在 网 页 中 实现 圆 形 图 像 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 5 章 \5-5-4.html 。 视频 : 光盘 \ 视 频 \ 第 5 章 \5-5-4.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 5 章 \5-5-4.html”， 页 面 效果 如 图 5-56 所 示 。 转 换 到 代码 
视图 中 ， 在 <body> 与 </body> 标签 之 间 添 加 <canvas> 标签 ， 并 对 相关 属性 进行 设置 ， 注 意 两 个 
<canvas> 标签 的 id 名 称 不 同 ， 如 图 5-57 所 示 。 





<!doctype html> 
<html> 
<head> 

meta charset="Utf-8" 
cttttez > 在 | 实现 效果 </titte> 
<link href="style/5-5-4.css" rel="stylesheet" 
type="text/css"> 
</head> 





<body> 
<canvas id="canvas2" width="466" height="460">| 


你 的 浏览 器 不 支持 该 功能 </canvas> 


<canvas id="canvas1l" width="466" height="466">| 
你 的 浏览 器 不 支持 该 功能 </canvas> 
<Jbody> 





ly </html> 
图 5-56 图 5-57 
苹 。” 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 #canvas1 和 名 为 #canvas2 的 


CSS 样式 ， 如 图 5-58 所 示 。 返 回 网 页 设计 视图 中 ， 使 刚 添加 的 id 名 称 为 canvas1 和 canvas2 的 
两 个 canvas 元 素 定位 在 页 面 水 平 居中 的 位 置 ， 如 图 5-59 所 示 。 


CT 已 ，ws caizmss 











#canvas1{ 
position: absolute; 
top: S50px; 
left: 50%; 
margin-left: -200px; 
z-index: 1; 

} 

#canvas2{ 
position: absolute; 
top: Sepx; 
left: 50%; 
margin-left: -200px; 
z-index: 2; 





图 5-58 图 5-59 
葬 蜀 在 <canvas> 结束 标签 之 后 添加 相应 的 JavaScript 脚本 代码 。 
of© 


<script type="text/javascript"> 
var canvas=document .getElementByid("canvas1"); 
var context=canvas.getContext ("2d"); 
// 绘制 底部 白色 圆 形 
context.arc(200,200,200,0,Math.PI*2,true); 
context .fillStyle="#FFFFFF"; 
context .fill(); 
function Draw(){ 
Var canvas=document .getElementByid("canvas2"); 
Var context=canvas.getContext ("2d"); 
// 在 画布 对 象 中 绘制 图 像 
Var newImg=new Image(); 
newImg.src="images/55402.jpg"; 
newImg.onload=function(){ 
ArcClip (context); 
context .drawImage (newImg, -100,0); 
} 
1 
function ArcClip(context) { 
// 裁 切 路 径 
context .beginPath (); 
context.arc(200,200,190,0,Math.PI*2,true); // 设置 一 个 圆 形 绘图 路 径 
context.clip(); // 裁剪 区 域 





} 


window.addEventListener ("load",Draw,true); 


</script> 


区 保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 使 用 <canvas> 标签 与 JavaScript 脚本 代码 相 
结合 在 网 页 中 实现 的 圆 形 图 像 效 果 ， 如 图 5-60 所 示 。 








在 绘制 图 片 之 前 ， 首 先 使 用 方法 ArcClip(context) 设置 一 个 圆 形 裁 草 区 域 。 先 
设置 一 个 圆 形 的 绘图 路 径 ， 再 调用 clip() 方法 ， 即 完成 区 域 的 裁剪 。 





本 章 全 面向 读者 介绍 了 使 用 HTML 5 中 新 增 的 <canvas> 标签 在 网 页 中 绘制 各 种 图 形 的 方法 ， 
包括 各 种 基本 图 形 、 曲 线路 径 、 文 字 、 渐 变 和 裁剪 区 域 等 内 容 。 本 章 内 容 很 多 地 方 涉及 数学 知识 ， 不 
容易 理解 ， 读 者 需要 仔细 体会 ， 多 练习 ， 掌 握 使 用 <canvas> 标签 在 网 页 中 绘制 各 种 图 形 。 
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本 章 知识 点 
第 6 章 使 用 HTMLS 在 页 面 学 所 使 用 <embed> 杆 签 汗 六 
中 WH 入 视 频 音 频 庶 入 音频 和 视频 的 方法 
MY 了 解 HIML 5 多 媒体 的 基础 只 
WY 掌握 <audio> 标签 的 基础 知 
在 HTML 5 之 前 ， 在 线 的 音频 和 视频 都 是 借助 Flash 或 第 识 和 使 用 方法 
三 方 工具 实现 的 ， 现 在 HTML 5 也 支持 这 方面 的 功能 ，HTML 5 掌握 <video> 标签 的 基础 知 


为 开发 者 提供 了 标准 的 、 集 成 的 AP|。 本 章 将 介绍 HTML 5 中 的 和- 
两 个 重要 元 素 一 audio 和 video， 分 别 用 于 实现 音频 和 视频 。 识 和 使 用 方法 
WY 掌握 <audio> 与 <video> 


标签 的 属性 和 事件 








在 网 页 中 谱 入 音频 和 视频 是 越 来 越 常见 了 ， 也 使 网 页 内 容 越 来 越 精彩 。 通 过 <embed> 标签 可 
以 将 音频 嵌入 网 页 中 ， 还 可 以 插入 许多 不 同 格式 的 视频 文件 。<embed> 标签 在 HTML 4.01 中 就 已 
经 存在 ， 在 HTML 5 中 依然 支持 该 标签 。 








将 音频 文件 嵌入 到 网 页 中 ， 可 以 在 网 页 上 显示 播放 器 的 外 观 ， 包 括 播放 、 和 暂停 、 停 止 、 音 量 及 声 
音 文件 的 开始 和 结束 等 控制 按钮 。 使 用 <embed> 标签 即 可 在 网 页 中 嵌入 音频 文件 ， 赃 入 音频 的 基 
本 语法 如 下 。 


<embed src=" 音频 文件 地 址 " width=" 宽度 " height=" 高 度 " autostart=" 是 否 自动 播放 " 
loop=" 是 否 循环 播放 "></embed> 





























<embed> 标签 中 各 属性 的 说 明 如 表 6-1 所 示 。 


表 6-1 <embed> 标签 属性 说 明 
说 明 
该 属性 用 于 设置 所 需要 说 入 的 音频 文件 路 径 和 名 称 
该 属性 用 于 设置 所 嵌入 的 音频 播放 控件 的 宽度 
该 属性 用 于 设置 所 嵌入 的 音频 播放 控件 的 高 度 













( 续 表 ) 










属性 | 说 。 明 
| 其 属性 值 有 两 个 ， 一 个 是 true， 表 示 自 播放 。 
另 一 个 是 false， 表 示 不 自动 播放 


该 属性 用 于 设置 音频 文件 是 否 循环 播放 ， 其 属性 值 有 两 个 ， 一 个 是 true， 表 示 音 频 文 件 
将 无 限 次 地 循环 播放 。 另 一 个 是 false， 表 示 音 频 文 件 只 播放 一 次 


链接 的 声音 文件 可 以 是 相对 地 址 的 文件 ， 也 可 以 是 绝对 地 址 的 文件 ， 用 户 可 以 
根据 需要 决定 声音 文件 的 路 径 地 址 ， 但 是 通常 都 是 使 用 同一 站 点 下 的 相对 地 址 路 径 ， 
这 样 可 以 防止 页 面 上 传 到 网 络 上 出 现 错 误 。 





在 网 页 中 嵌入 音频 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 6 章 \6-1-1.html 。 视频 : 光盘 \ 视 频 \ 第 6 章 \6-1-1.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 6 章 \6-1-1.html”, 可 以 看 到 页 面 效果 ， 
如 图 6-1 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 6-2 所 示 。 








Figoctype htmt> 
html> 
<head> 
kmeta charset="utf-8"> 
ktitle> 在 网 页 中 嵌入 音频 </title> 
link href="style/6-1-1.css" rel="stylesheet" type= 
"text/css"> 
/head> 
kbody> 
|<center> 
<img src="images/61101.jpg" width="513" height="583" alt=| 
I /> 
[</center> 
[</body> 
K/html> 


图 6-1 图 6-2 
苹 ”在 页 面 中 相应 的 位 置 输入 换行 符 标 签 ， 添加 <embed> 标签 并 对 属性 进行 设置 ， 如 图 6-3 


所 示 。 执行“ 文件 > 保存 ”命令 ， 保 存 该 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 在 网 页 中 获 入 音频 的 
效果 并 听 到 音乐 ， 如 图 6-4 所 示 。 
































<body> 
<center> 

<img src="images/61161.jpg"” width="513" height="583" 
att=" /><br> 
<embed src="images/sound.mp3" width="499"” height="48" 
autostart="true" loop="true"></embed> 
eenter 


</body> 





























95 四 





广 入 音频 使 用 的 是 <embed> 标签 ， 通 过 该 标签 在 网 页 中 内 入 音频 文件 进行 播 
放 ， 可 以 在 网 页 中 显示 系统 默认 的 音频 播放 器 界面 ， 并 对 音频 的 播放 进行 控制 。 





在 网 页 中 可 以 插入 许多 普通 格式 的 视频 文件 ， 例 如 WMV 和 AVI 等 格式 。 在 网 页 中 插入 视频 后 ， 
可 以 在 网 页 上 显示 播放 器 外 观 ， 包 括 播放 、 暂 停 、 停 止 和 音量 等 控制 按钮 。 使 用 <embed> 标签 在 网 
页 中 插入 普通 视频 的 语法 格式 如 下 。 


<embed src=" 视频 文件 地 址 " width=" 视频 宽度 " height=" 视频 高 度 " autostart=" 是 否 自动 播 
放 " 1oop=" 是 否 循环 播放 "></embed> 


通过 府 入 视频 的 语法 可 以 看 出 ， 在 网 页 中 嵌入 视频 文件 与 在 网 页 中 说 入 音频 的 方法 非常 相似 ， 都 
是 使 用 <embed> 标签 ， 只 不 过 是 谋 入 视频 文件 链接 的 是 视频 文件 ， 而 width 和 height 属性 分 别 设 
置 的 是 视频 播放 器 的 宽度 和 高 度 。 


在 网 页 中 嵌入 视频 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 6 章 \6-1-2.html 视频: 光盘 \ 视 频 \ 第 6 章 \6-1-2.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 6 章 \6-1-2.html”, 可 以 看 到 页 面 效果 ， 
如 图 6-5 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 6-6 所 示 。 


COE TI pr 胸 








<Tdqoctype html> 


F - <html> 
<head> 
<meta charset="utf-8"> 
<title> 在 网 页 中 嵌入 视频 </title> 

Be <link href="style/6-1-2.css" rel="stylesheet" type=| 
"text/css"> 
</head> 
<body> 
一 一 一 <div id="video"> 此 处 显示 “id "video" 的 内 容 </div> 





</body> 
wor K/html> 











图 6-5 图 6-6 


将 光标 移 至 <div id="video"> 与 </div> 标签 之 间 ， 将 多 余 文 字 删 除 ， 添 加 <embed> 标签 
并 对 属性 进行 设置 ， 如 图 6-7 所 示 。 执 行 “ 文 件 > 保存 ”命令 ， 保 存 该 页 面 ， 在 浏览 器 中 预览 页 面 ， 
可 以 看 到 播放 视频 的 效果 ， 如 图 6-8 所 示 。 











<body> 
<div id="video"> 
<embed src="images/video.avi" width="456" height="287" 


















图 6-7 


<embed> 标签 可 以 插入 多 种 音频 和 视频 格式 ， 支 持 的 播放 格式 取决 于 浏览 者 系统 
中 的 播放 器 ， 确 保 浏览 者 系统 中 的 播放 器 支持 网 络 上 相应 格式 的 多 媒体 资源 播放 。 





HTML 5 对 多 媒体 的 支持 是 顺势 发 展 ， 只 是 目前 规范 还 不 是 很 完整 ， 对 于 各 种 浏览 器 的 支持 ， 差 
别 也 很 大 ， 如 何 深入 理解 HTML 5 的 多 媒体 内 容 ， 有 必要 对 其 相关 的 多 媒体 技术 有 一 定 的 了 解 。 


早 在 2000 年 ， 在 线 视频 都 是 借助 第 三 方 工具 实现 的 ， 如 RealPlayer 和 QuickTime 等 ， 但 它 
们 存在 隐私 保护 问题 或 兼容 性 问题 。 

HTML 规范 的 发 展 与 浏览 器 息息相关 ， 当 Microsoft 公司 赢得 了 2001 年 的 浏览 器 大 战 时 ， 即 停 
止 了 对 IE 浏览 器 功能 的 改进 。 而 W3C 也 声明 了 HTML 规范 已 经 “过 时 ”， 转 而 关注 XHTML 和 
XHTML 2， 严 谨 的 数据 规范 和 验证 ， 弱 化 了 HTML 本 身 的 功能 。 此 时 没有 人 认为 ， 在 HTML 中 实 
现 视频 播放 是 个 好 主意 。 

然而 根据 实际 的 需要 ， 开 发 人 员 仍然 要 在 网 页 上 实现 多 媒体 功能 ， 进 而 转向 Flash 的 改进 功能 。 

2002 年 ，Macromedia 公司 为 了 满足 使 用 Flash Video 开发 人 员 的 需要 ， 引 入 了 Sorenson 
Spark。2003 年 , 该 公司 使 用 VP6 编 解码 器 (codec) 引入 了 外 部 视频 FLV 格式 。 在 当时 , 这 是 高 质量 、 
高 压缩 的 。 由 此 使 用 Flash 开发 的 在 线 视频 有 了 近 十 年 的 发 展 ，Flash Player 的 安装 库 也 变 得 越 来 
越 大 ，Flash Video 几乎 没有 缺点 ， 已 经 发 展 成 为 事实 上 的 Web 标准 。 

在 HTML 5 之 前 ， 要 在 网 页 中 添加 音频 和 视频 ， 最 简单 、 最 直接 的 方法 就 是 使 用 Flash。 这 种 
实现 方式 的 缺点 是 代码 较 长 ， 最 重要 的 是 需要 安装 Flash 插件 ， 并 非 所 有 浏览 器 都 拥有 同样 的 插件 。 

在 HTML 5 中 , 不 但 不 需要 安装 其 他 插件 , 而 且 实 现 还 很 简单 。 插 放 一 个 视频 只 需要 一 行 代码 , 如 : 


<video src= "images\movie.mp4 " autoplay></video> 


可 见 ， 在 HTML 5 中 省 去 了 许多 不 必要 的 信息 。 
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在 HTML 5 中 实现 多 媒体 , 不 需要 知道 数据 的 类 型 ， 因 为 标签 已 经 指明 ; 也 不 需要 设置 版 本 信息 ， 
因为 不 涉及 这 方面 的 信息 ; 可 以 由 CSS 样式 表 来 控制 尺寸 ， 因 为 它们 是 页 面 元 素 。 这 些 原 生 的 优势， 
是 其 他 任何 第 三 方 插件 都 无 法 企及 的 。 


编 解码 器 是 一 个 算法 代码 ， 用 来 处 理 视频 、 音 频 或 者 其 元 素数 据 的 编码 格式 。 对 音频 或 视频 文件 
进行 编码 ， 可 使 得 文件 大 大 缩小 ， 方 便 在 互联 网 上 传输 ， 因 为 在 网 络 多 媒体 发 展 方面 ， 网 络 宽带 是 一 
个 很 大 的 瓶颈 。 

HTML 5 音频 文件 格式 及 其 各 自 的 编 解 码 器 说 明 如 表 6-2 所 示 。 


表 6-2 HTML 5 音频 文件 格式 及 其 各 自 的 编 解码 器 说 明 
音频 格式 | 编 解码 器 
[WESUUURLLLLU 文件 扩展 名 为 .mp3， 使 用 ACC 音频 

[WA 文件 扩展 名 为 .wav， 使 用 Wav 音频 

[COOL 文件 扩展 名 为 .ogg， 使 用 OggVorbis 音频 


HTML 5 视频 文件 格式 及 其 各 自 的 编 解码 器 说 明 如 表 6-3 所 示 。 
表 6-3 HTML 5 视频 文件 格式 及 其 各 自 的 编 解码 器 说 明 


视频 格式 | 编 解码 器 
文件 扩 展 名 为 .mp4， 使 用 H.264 视频 、ACC 音频 
[WMA 文件 扩展 名 为 .mkv， 使 用 VP8 视频 、OggVorbis 音频 
[COOL 文件 扩展 名 为 .ogg， 使 用 Theora 视频 、OggVorbis 音频 


H.264 编 解码 器 被 广泛 采用 ， 因 此 读者 所 使 用 的 大 多 数 编码 软件 都 可 以 编码 一 个 MP4 视频 。 
WebM 是 新 兴 的 ， 但 是 工具 都 已 经 可 以 使 用 。Ogg 是 开源 的 ， 但 是 还 没有 广泛 使 用 ， 因 此 只 有 少数 
几 个 工具 可 供 其 使 用 。 


MP4 容器 、H.264 视频 、AAC 视频 编 解 码 器 及 ACC 音频 编 解 码 器 都 是 
MPEG LA Group 专利 的 专 有 格式 。 对 于 个 人 网 站 或 者 仅 有 少量 视频 的 公司 ， 这 不 
是 问题 。 然 而 对 于 那些 有 大 量 视频 的 公司 要 非常 注意 许可 证 和 费用 ， 因 为 这 可 能 会 
影响 他 们 盈亏 的 底线 ，MP4 容器 及 其 编 解码 器 对 终端 用 户 通常 是 免费 的 。 


直到 现在 ， 仍 然 不 存在 完整 的 音频 和 视频 标准 。 尽 管 HTML 5 提供 了 音频 和 视频 的 规范 ， 但 其 
中 所 涉及 的 内 容 还 不 够 完善 。 

。 流 式 音频 和 视频 

在 目前 的 HTML 5 视频 规范 中 ， 还 没有 比特 率 切 换 标准 ， 所 以 对 视频 的 支持 仅 限于 先 全 部 加 载 
完毕 再 播放 的 方式 。 但 流 式 媒体 格式 是 比较 理想 的 格式 ， 在 未 来 的 设计 中 ， 肯 定 会 在 这 方面 进行 规范 。 
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。 跨 源 资 源 的 共享 

HTML 5 的 媒体 受到 HTTP 跨 源 资源 共享 的 限制 。HTML 5 针对 跨 源 资源 的 共享 ， 提 供 了 专门 
的 规范 ， 这 种 规范 不 仅仅 局 限于 音频 和 视频 。 

e 全 屏 控制 

从 安全 角度 讲 ， 浏 览 器 中 的 脚本 控制 范围 不 会 超出 浏览 器 之 外 。 如 果 需 要 控制 全 屏 操作 ， 可 能 还 
需要 浏览 器 提供 相关 的 控制 功能 。 

。 字幕 支持 

如 果 在 HTML 5 中 对 音频 和 视频 进行 编程 ， 可 能 还 需要 对 字幕 的 控制 。 基 于 流行 的 字幕 格式 
SRT 的 字幕 支持 规范 (WebSRT) 仍 在 编写 中 ， 尚 未 完全 纳入 规范 。 

。 编 解码 支持 

使 用 HTML 5 媒体 标签 的 最 大 确定 在 于 缺少 通用 编 解码 的 支持 。 随 着 时 间 的 推移 ， 最 终 会 形成 
一 个 通用 的 、 高 效 的 编 解码 器 ， 到 时 候 多 媒体 的 应 用 形式 会 比 现在 更 加 丰富 。 未 来 的 发 展 趋势 ， 一 定 
是 我 们 所 期 待 的 那样 ， 或 许 还 会 给 我 们 意外 的 惊喜 。 


网 络 上 有 许多 不 同 格式 的 音频 文件 ， 但 HTML 标签 所 支持 的 音乐 格式 并 不 是 很 多 ， 并 且 不 同 的 
浏览 器 支持 的 格式 也 不 相同 。HTML 5 针对 这 种 情况 ， 新 增 了 <audio> 标签 来 统一 网 页 音频 格式 ， 
可 以 直接 使 用 该 标签 在 网 页 中 添加 相应 格式 的 音乐 。 





目前 ，HTML 5 新 增 的 Audio 元 素 所 支持 的 音频 格式 主要 是 Wav、MP3 和 Ogg， 在 各 种 主要 
浏览 器 中 的 支持 情况 如 表 6-4 所 示 。 


表 6-4 HTML 5 音频 在 浏览 器 中 的 支持 情况 





x V V 
V V x 





在 HTML 5 中 新 增 了 <audio> 标签 ， 通 过 该 标签 可 以 在 网 页 中 吝 入 音频 并 播放 。 在 网 页 中 使 用 
HTML 5 中 的 <audio> 标签 说 入 音频 时 ， 只 需要 指定 <audio> 标签 中 的 src 属性 值 为 一 个 音频 源 文 
件 的 路 径 就 可 以 了 ， 代 码 如 下 所 示 。 





<audio src=" images/music.mp3"> 
你 的 浏览 器 不 支持 audio 元 素 


</audio> 


通过 这 种 方法 可 以 将 音频 文件 嵌入 到 网 页 中 ， 如 果 浏览 器 不 支持 HTML 5 的 <audio> 标签 , 将 
会 在 网 页 中 显示 蔡 代 文字 “你 的 浏览 器 不 支持 audio 元 素 ”。 这 种 不 兼容 的 提示 与 Canvas 标签 是 
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一 样 的 ， 也 是 HTML 5 处 理 不 兼容 的 统一 方法 。 


在 网 页 中 嵌入 音频 播放 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 6 章 \6-3-2.html 。 视频 : 光盘 \ 视 频 \ 第 6 章 \6-3-2.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 6 章 \6-3-2.html”, 可 以 看 到 页 面 效果 ， 
如 图 6-9 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 6-10 所 示 。 


K!doctype html> 

<html> 

<head> 

kmeta charset="utf-8"> 

ktitle> 在 网 页 中 嵌入 音频 播放 </title> 

<Link href="style/6-3-2.css" rel="stylesheet" type=| 
"text/css"> 

[</head> 





kbody> 
kdiv id="box"> 此 处 显示 “id "box" 的 内 容 </div> 
</body> 
/html> 














图 6-9 图 6-10 


将 光标 移 至 名 为 box 的 Div 中 , 将 多 余 文 字 删除 并 加 入 <audio> 标签 , 为 其 设置 相应 的 属性 ， 
如 图 6-11 所 示 。 保 存 页 面 , 在 浏览 器 中 预览 该 页 面 的 效果 , 可 以 看 到 播放 器 控件 并 播放 音乐 , 如 图 6-12 
所 示 。 





kdiv id="box"> 
< i =" i >< 
kK/div> 














图 6-11 图 6-12 


| 在 <audio> 标签 中 加 入 controls 属性 设置 ， 可 以 使 嵌入 到 网 页 中 的 音频 文件 显 
示 音 频 播放 控制 条 ， 从 而 对 音频 的 播放 、 停 止 及 音量 等 进行 控制 。 





视频 标签 的 出 现 无 疑 是 HTML 5 的 一 大 亮点 ， 但 是 旧 的 浏览 器 不 支持 HTML 5 Video， 并 且 涉 
及 视频 文件 的 格式 问题 ，Firefox、Safari 和 Chrome 的 支持 方式 并 不 相同 ， 所 以 ， 在 现 阶段 要 想 使 
用 HTML 5 的 视频 功能 ， 浏 览 器 兼容 性 是 一 个 不 得 不 考虑 的 问题 。 


@1oo 


目前 ，HTML 5 新 增 的 Video 元 素 所 支持 的 视频 格式 主要 是 MPEG4、WebM 和 Ogg， 在 各 种 
主要 浏览 器 中 的 支持 情况 如 表 6-5 所 示 。 


表 6-5 HTML 5 视频 在 浏览 器 中 的 支持 情况 


Firefox 28.0 |Opera20.0 [Chrome 34.0 |Safari5.34 
NA x 这 AN 


V V V x 
V V WwW x 





在 网 页 中 可 以 使 用 HTML 5 新 增 的 Video 元 素 说 入 视频 ， 其 方法 与 Audio 元 素 相似 ， 还 可 以 在 
<video> 标签 中 添加 width 和 height 属性 设置 ， 从 而 控制 视频 的 宽度 和 高 度 ， 代 码 如 下 所 示 。 


<video src= " images/movie.mp4"width="562"height="423 "> 
你 的 浏览 器 不 支持 video 元 素 


</video> 


通过 这 种 方法 即 可 把 视频 添加 到 网 页 中 ， 浏 览 器 不 兼容 时 ， 显 示 蔡 代 文 字 “ 你 的 浏览 器 不 支持 
video 元 素 ”。 对 于 兼容 性 的 处 理 方法 ， 也 可 以 增加 丰富 的 标签 内 容 ， 或 者 增加 Flash 的 替代 方案 。 


在 网 页 中 嵌入 视频 播放 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 6 章 \6-4-2.html 。 视频 : 光盘 \ 视 频 \ 第 6 章 \6-4-2.mp4 


[GaE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 6 章 \6-4-2.html”, 可 以 看 到 页 面 效 果 ， 
如 图 6-13 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 6-14 所 示 。 





Tgoctype htmnt> 

html> 

khead> 

Fmeta charset="utf-8"> 

ktitle> 在 网 页 中 嵌入 视频 播放 </title> 

link href="style/6-4-2.css" rel="stylesheet" type= 
"text/css"> 

/head> 





body> 

div id="top"></div> 

div id="logo"><img src="images/64203.png" width="98" 
eight="114" alt=""/></div> 

kdiv id="box"> 此 处 显示 “id "box" 的 内 容 </div> 

k/body> 

9 /html> 


图 6-13 图 6-14 
”将 光标 移 至 名 为 box 的 Div 中 ， 将 多 余 文 字 删 除 ， 在 该 Div 标签 中 加 入 <video> 标签 ， 并 


设置 相关 属性 ， 如 图 6-15 所 示 。 在 <video> 标签 之 间 加 入 <source> 标签 ， 并 设置 相关 属性 ， 如 
6-16 所 示 。 














101© 





<div id="box"> 


<video controls wjdth="562" height="423"></video> 
< 7 本 Vv> 


图 6-15 








<div id="box"> 
<video controls width="562" height="423"> 
<source type="video/mp4" src="images/movie.mp4"> 
</video> 
</div> 











图 6-16 


在 <video> 标签 中 的 controls 属性 是 一 个 布尔 值 ， 显 示 play/stop 按钮 ; 
width 属性 用 于 设置 视频 所 需要 的 宽度 ， 默 认 情 况 下 ， 浏 览 器 会 自动 检测 所 提供 的 视 
频 尺寸 height 属性 用 于 设置 视频 所 需要 的 高 度 。 





吨 畏 ”返回 网 页 设计 视图 中 ， 可 以 看 到 <video> 标签 在 网 页 中 显示 为 一 个 灰色 区 域 ， 如 图 6-17 所 
示 。 保 存 页 面 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 使 用 HTML 5 所 实现 的 嵌入 视频 播放 的 效果 , 如 图 6-18 
所 示 。 














图 6-17 图 6-18 


对 于 HTML 5 的 <video> 标签 ， 每 个 浏览 器 的 支持 情况 不 同 ，Firefox 浏览 器 
只 支持 .0gg 格式 的 视频 文件 ，Safari 和 Chrome 浏览 器 只 支持 .mp4 格式 的 视频 
文件 ， 而 IE11 以 下 版 本 不 支持 <video> 标签 ，IE11 版 本 浏览 器 可 以 支持 <video> 
标签 ， 所 以 在 使 用 该 标签 时 一 定 需要 注意 。 





由 于 各 种 浏览 器 对 音频 和 视频 的 编 解码 器 的 支持 不 一 样 ， 为 了 能 够 在 各 种 浏览 器 中 都 能 正常 显示 
音频 和 视频 效果 ， 可 以 提供 多 种 不 同 格式 的 音频 和 视频 文件 。 这 就 需要 使 用 <source> 标签 为 audio 
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元 素 或 video 元 素 提供 多 个 备用 多 媒体 文件 ， 代 码 如 下 所 示 。 


<audio src=" images/music-mp3 "> 
<source src=" images/music-ogg"type="audio/ogg "> 
<source src=" images/music-mp3"type="audio/mpeg "> 
你 的 浏览 器 不 支持 audio 元 素 


</audio> 
或 


<video src=" images/movie.mp4"width="562"height="423"controls> 


De 


<source src=" images/movie.ogg "type="video/ogg"codes="theora,vorbis™ 
<source src=" images/movie.mp4 "type="video/mp4"> 


你 的 浏览 器 不 支持 video 元 素 


</video> 


由 上 面 可 以 看 出 ， 使 用 source 元 素 代 蔡 了 <audio> 或 <video> 标签 中 的 src 属性 ， 这 样 浏览 
器 可 以 根据 自身 的 播放 能 力 ， 按 照 顺 序 自动 选择 最 佳 的 源 文件 进行 播放 。 
<source> 标签 中 的 属性 说 明 如 表 6-6 所 示 。 


表 6-6 “source> 标签 的 属性 说 明 







I | 说 ” 明 

[SG 用 于 指定 媒体 文件 的 URL 地 址 ， 可 以 是 相对 路 径 地址 ， 也 可 以 是 绝对 路 径 地 址 
用 于 指定 媒体 文件 的 类 型 ， 属 性 值 为 媒体 文件 的 MIME 类 型 ， 该 属性 值 还 可 以 通过 
codes 参数 指定 编码 格式 。 为 了 提高 执行 效率 ， 定 义 详细 的 type 属性 是 非常 必要 的 


可 以 使 用 脚本 代码 来 判断 浏览 器 是 否 支 持 audio 元 素 或 者 video 元 素 ， 也 可 以 使 用 脚本 代码 动 
态 地 创建 它 ， 并 检测 是 否 存 在 ， 脚 本 代码 如 下 。 





Var support = !!document .createElement ("audio") .canPlayType; 


这 段 脚本 代码 会 动态 创建 audio 元 素 ， 然 后 检查 canPlayType() 函数 是 否 存在 。 通 过 执行 两 次 
逻辑 非 运算 符 “!”， 将 其 结果 转换 成 布尔 值 ， 就 可 以 确定 音频 对 象 是 否 创 建成 功 。 同 样 ，video 元 素 
也 可 以 这 样 去 检查 。 


在 HTML 5 新 增 的 <audio> 与 <video> 标签 中 都 提供 了 相应 的 属性 ， 通 过 在 标签 中 添加 相应 的 
属性 设置 ， 可 以 对 页 面 中 的 音频 和 视频 进行 设置 。 在 <audio> 与 <video> 标签 中 所 提供 的 属性 可 以 
大 致 分 为 标签 属性 (attributes) 和 接口 属性 (properties)。 
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<audio> 与 <video> 标签 所 提供 的 元 素 标签 属性 基本 相同 ， 主 要 用 于 为 网 页 标签 。 元 素 标签 属 
性 的 说 明 如 表 6-7 所 示 。 


表 6-7 元 素 标 签 属性 说 明 




























| 说 了 明 
a 用 于 指定 媒体 文件 的 URL 地 址 ， 可 以 是 相对 路 径 地 址 ， 也 可 以 是 绝对 路 径 地 址 
用 于 设置 媒体 文件 加 载 后 自动 播放 。 该 属性 在 标签 中 的 使 用 方法 如 下 
<audio src="images/music.mp3" autoplay></video> 
或 
<video src="resources/video.mp4" autoplay></video> 
用 于 为 视频 和 音频 添加 自 带 的 播放 控制 条 ， 控 制 条 中 包括 播放 / 暂停 、 进 度 条 、 进 度 时 间 和 
音量 控制 等 。 该 属性 在 标签 中 的 使 用 方法 如 下 。 
<audio src="images/music.mp3" controls></video> 


<video src="resources/video.mp4" controls ></video> 
用 于 设置 音频 或 视频 循环 播放 。 该 属性 在 标签 中 的 使 用 方法 如 下 。 
<audio src="images/music.mp3"controls loop></video> 
或 
<video src="resources/video.mp4" controls loop></video> 
表示 页 面 加 载 完成 后 ， 如 何 加 载 视频 数据 。 该 属性 有 三 个 值 : none 表示 不 进行 预 加 载 ; 
metadata 表示 只 加 载 媒体 文件 的 元 数据 ; auto 表示 加 载 全 部 视频 或 音频 。 默 认 值 为 
auto。 用 法 如 下 。 
<audio src="images/music.mp3" controls preload="auto"></video> 
或 
<video src="resources/video.mp4" controls preload="auto"></video> 
如 果 在 标签 中 设置 了 autoplay 属性 ， 则 忽略 preload 属性 


该 属性 是 <video> 标签 的 属性 ，<audio> 标签 没有 该 属性 。 该 属性 用 于 指定 一 幅 替 代 图 片 
的 URL 地 址 ， 当 视频 不 可 用 时 ， 会 显示 该 替代 图 片 。 用 法 如 下 。 
<video src="resources/video.mp4" controls poster="images/none.jpg"></video> 


这 两 个 属性 是 <video> 标签 的 属性 ，<audio> 标签 没有 这 两 个 属性 。 用 于 设置 视频 的 宽度 
和 高 度 ， 单 位 是 像素 ， 使 用 方法 如 下 。 
<video src="resources/video.mp4" controls width="800" height="600"></video> 





<audio> 与 <video> 标签 除 提供 了 标签 属性 外 ， 还 提供 了 一 些 接口 属性 ， 用 于 音频 和 视频 文件 
的 编程 。 元 素 的 接口 属性 说 明 如 表 6-8 所 示 。 
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表 6-8 元 素 的 接口 属性 
说 明 

IaurrentSre | 只 读 属性 ， 获 取 当前 正在 播放 或 已 加 载 的 媒体 文件 的 URL 地 址 

Viaeowidih Li 只 读 属 性 ，video 元 素 特有 属性 ， 获 取 视 频 原始 的 宽度 

MaeoHegni | 只 读 属性 ，video 元 素 特有 属性 ， 获 取 视 频 原始 的 高 度 

currentTime “| 获取 /设置 当前 媒体 播放 位 置 的 时 间 点 ， 单 位 为 s( 秒 ) 

emime 只 读 属性 ， 获 取 当前 媒体 播放 的 开始 时 间 ， 通 常 是 0 

只 读 属性 ， 获 取 整 个 媒体 文件 的 播放 时 长 ， 单 位 为 s( 秒 )。 如 果 无 法 获取 ， 则 返回 NaN 

aiima 区 取 / 设 置 媒体 文件 播放 时 的 音量 ， 取 值 范围 在 0.0 ~ 0.1 之 间 

[muted 获取 /设置 媒体 文件 播放 时 是 否 静音 。true 表示 静音 ，false 表示 消除 静音 

iended 四 只 读 属性 ， 如 果 媒体 文件 已 经 播放 完毕 ， 则 返回 true， 否 则 返回 false 

只 读 属 性 ， 获 取 已 播放 媒体 的 TimesRanges 对 象 ， 该 对 象 内 容 包 括 已 播放 部 分 的 

开始 时 间 和 结束 时 间 

冉 丙 二 只 污 层 性 ， 如 果 召 体 文件 当前 是 暂停 的 或 未 播放 ， 则 返回 true， 否 则 返回 false 

只 读 属 性 ， 读 取 媒 体 文件 的 错误 代码 。 正 常情 况 下 ，error 属性 值 为 null; 有 错误 是 ， 

返回 MediaError 对 象 code。 

code 有 4 个 错误 状态 值 

> MEDIA_ERR_ABORTED( 值 为 1): 中 止 。 媒 体 资源 下 载 过 程 中 ， 由 于 用 户 操 
作 原 因而 被 中 止 。 

> MEDIA_ERR_NETWORK( 值 为 2): 网 络 中 断 。 媒 体 资源 可 用 ， 但 下 载 出 现 
网 络 错误 而 中 止 。 

> ”MEDIA_ERR_DECODE( 值 为 3): 解码 错误 。 媒 体 资源 可 用 ， 但 解码 时 发 生 
了 错误 。 

> MEDIA_ERR_SRC_NOT_SUPPORTED( 值 为 4): 不 支持 格式 。 媒 体格 式 
不 被 支持 

只 读 属性 ， 获 取 浏览 器 是 否 正在 请 求 媒体 数据 。true 表示 正在 请 求 ，false 表示 停止 












只 读 属 性 ， 获 取 媒 体 资源 已 请 求 的 TimesRanges 对 象 ， 该 对 象 内 容 包 括 已 请 求 部 

分 的 开始 时 间 和 结束 时 间 

只 读 属性 ， 获 取 媒 体 资源 的 加 载 状 态 。 该 状态 有 如 下 4 个 值 。 

> NETWORK_EMPTY( 值 为 0): 加 载 的 初始 状态 。 

> NETWORK_idLE( 值 为 1): 已 确定 编码 格式 ， 但 尚未 建立 网 络 连接 。 

> NETWORK_LOADING( 值 为 2): 媒体 文件 加 载 中 。 

> NETWORK_NO_SOURCE( 值 为 3): 没有 支持 的 编码 格式 ， 不 加 载 

只 读 属性 ， 获 取 本 地 缓存 的 媒体 数据 的 TimesRanges 对 象 。TimesRanges 对 象 

可 以 是 个 数组 

只 读 属性 ， 获 取 当 前 媒体 播放 的 就 绪 状态 ， 共 有 如 下 5 个 值 。 

> HAVE_NOTHING( 值 为 0): 还 没有 获取 到 媒体 文件 的 任何 信息 。 

> HAVE_METADATA( 值 为 1): 已 获取 到 媒体 文件 的 元 数据 。 

> HAVE_CURRENT_DATA( 值 为 2): 已 获取 到 当前 播放 位 置 的 数据 ， 但 没有 下 
一 帧 数据 。 

> HAVE_FUTURE_DATA( 值 为 3): 已 获取 到 当前 播放 位 置 的 数据 ， 且 包含 下 
一 帧 的 数据 。 

> HAVE_ENOUGH_DATA( 值 为 4): 已 获取 足够 的 媒体 数据 ， 可 以 正常 播放 
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实现 视频 的 快 进 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 6 章 \6-5-2.html 。 视频 : 光盘 \ 视 频 \ 第 6 章 \6-5-2.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 6 章 \6-5-2.html”, 可 以 看 到 页 面 效果 ， 
如 图 6-19 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 6-20 所 示 。 


lr 




















<body> 
<div id="top"></div> 
<div id="logo"><img src="images/64263.png" width="98" 
height="114" alt=""/></div> 
<div id="box"> 

<video id="myplayer" src="images/movie.mp4" width= 
"562" height="423" controls> 

</video> 
</div> 
<div id="btn"> 

<1nput type="button" name="button" 1d="button" value 
=" 快 进 。ctass="btnln> 
</div> 
</body> 


图 6-19 图 6-20 


E 权 玫 在 网 页 的 <head> 与 </head> 之 间 添 加 JavaScript 脚本 代码 ， 如 图 6-21 所 示 。 在 id 名 
为 button 的 按钮 中 添加 触发 事件 onClick， 调 用 JavaScript 脚本 代码 ， 如 图 6-22 所 示 。 


Kscript type="text/javascript™"> 

function Forward() { 
var el=document.getElementById("myplayer"); 
var time=el.currentTime; 
el.currentTime=time+6; 




















} 
</script> 











图 6-21 





<div id="btn"> 
<input type="button" name="button" id="button" vatLue=" 快 


进 " class="btn1" cnclLick= Forward( > 


图 6-22 











currentTime 属性 ， 即 可 实现 每 次 快 进 6s 的 效果 。 由 于 currentTime 属性 是 可 读 


x 首先 通过 脚本 获取 video 对 象 的 currentTime， 加 上 6s 后 再 赋值 给 对 象 的 
可 写 的 ， 因 此 可 以 给 该 属性 赋值 。 


国保 存 页 面 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 页 面 中 的 视频 效果 , 如 图 6-23 所 示 。 单 击 “ 快 进 “ 按 
钮 ， 可 以 看 到 视频 快 进 6s 的 效果 ， 如 图 6-24 所 示 。 
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图 6-23 图 6-24 


如 果 接 口 属 性 是 只 读 属 性 ， 则 只 能 获取 该 属性 的 值 ， 不 能 给 该 属性 赋值 。 接 口 
属性 不 能 用 于 <video> 标签 中 ， 只 能 通过 脚本 访问 。 








HTML 5 为 audio 与 video 元 素 还 提供 了 接口 方法 和 一 系列 接口 事件 ， 方 便 通 过 脚本 代码 对 族 
入 到 网 页 中 的 音频 和 视频 进行 控制 ， 本 节 将 向 读者 介绍 audio 和 video 元 素 的 接口 方法 和 接口 事件 。 


audio 和 video 元 素 的 接口 方法 说 明 如 表 6-9 所 示 。 


表 6-9 audio 和 video 元 素 的 接口 方法 
说 了 明 
[ERA 加 载 媒体 文件 ， 为 播放 做 准备 。 通 常用 于 播放 前 的 预 加 载 ， 还 会 用 于 重新 加 载 媒体 文件 
| 如 果 媒 体 文件 没有 加 载 ， 则 加 载 并 播放 ; 如果 是 暂停 的 ， 则 变 为 播放 ， 
自动 改变 paused 属性 为 false 
Badse00 逢 停 播放 媒体 文件 ， 自 动 改变 paused 属性 为 true 
测试 浏览 器 是 否 支持 指定 的 媒体 类 型 。 该 方法 的 语法 格式 如 下 。 
canPlayType(<type>) 
<type> 用 于 指定 的 媒体 类 型 ， 与 source 元 素 的 type 参数 的 指定 方法 相同 。 指 定 方式 
如 “video/mp4”， 指 定 媒体 文件 的 MIME 类 型 ， 该 属性 值 还 可 以 通过 codes 参数 指 
定编 码 格式 。 
该 方法 可 以 有 如 下 3 个 返回 值 。 
> ” 空 字符 串 : 表示 浏览 器 不 支持 指定 的 媒体 类 型 。 
> ”maybe: 表示 浏览 器 可 能 支持 指定 的 媒体 类 型 。 
> ”probably: 表示 浏览 器 确定 支持 指定 的 媒体 类 型 
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控制 视频 的 播放 和 和 暂停 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 6 章 \6-6-1.html 。 视频 : 光盘 \ 视 频 \ 第 6 章 \6-6-1.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 6 章 \6-6-1.html”, 可 以 看 到 页 面 效果 ， 
如 图 6-25 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 6-26 所 示 。 









id="top"></div> 
ogo"><img src="images/64263.png" width="98" 
114" alt=""/></div> 
<div id="box"> 
<video id="myplayer" width="562" height="423" > 
<source src="images/movie.mp4" type="video/mp4"> 
</video> 
</div> 
<div id="btn"> 
<input type="button" name="button" id="button" value 
=" 播 放 " cLass="btnl"> 
<input type="button" name="button2" jd="button2" 
value=" 和 暂停 " class="btn1"> 
</div> 
</body> 

















图 6-25 图 6-26 


[ 哎 末 在 <head> 与 </head> 标签 之 间 添 加 JavaScript 脚本 代码 ， 如 图 6-27 所 示 。 分 别 
在 id 名 为 button 和 button2 的 按钮 中 添加 触发 事件 ， 调 用 JavaScript 脚本 代码 ， 如 图 6-28 
所 示 。 


<script type="text/javascript"> 

var videoEl=null; 

function play() { 
videoEl.play(); 








} 
function pause() { 


videoEl.pause(); <div id="btn"> 


} <input type="button" name="button" 1d="button" 
window.onload=function() { value=" 揪 放 " ctass="btnl" onctick="pLay()"> 
videoEl=document .getElementById("myplayer");|| “input type="button" name="button2" id="button2" 

















} value=" 斩 停 " ctass="btnln onclick="pause()"> 
</script> </div> ER 
图 6-27 图 6-28 
设置 了 两 个 按钮 ， 分 别 控制 视频 的 播放 与 暂停 。 “播放 ”按钮 通过 定义 的 play() 
函数 执行 视频 的 接口 方法 play(); “暂停 ”按钮 通过 定义 的 pause() 函数 执行 视频 的 
接口 方法 pause()。 


[GE ”保存 页 面 , 在 浏览 器 中 预览 页 面 , 单 击 “播放 ”按钮 , 可 以 看 到 页 面 中 视频 开始 播放 , 如 图 6-29 
所 示 。 单 击 “ 暂 停 ” 按 钮 ， 可 以 看 到 页 面 中 视频 暂停 播放 ， 如 图 6-30 所 示 。 
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图 6-29 图 6-30 





HTML 5 还 为 audio 和 video 元 素 提供 了 一 系列 的 接口 事件 。 在 使 用 audio 和 video 元 素 读 取 
或 播放 媒体 文件 的 时 候 ， 会 触发 一 系列 的 事件 ， 可 以 用 JavaScript 脚本 来 捕获 这 些 事件 ， 并 进行 
应 的 处 理 。 

捕获 事件 有 两 种 方法 : 一 种 是 添加 事件 句柄 ; 一 种 是 监听 。 

在 网 页 的 audio 和 video 标签 中 添加 事件 句柄 ， 如 下 所 示 。 


<video id="myplayer" src="images/movie.mp4" onplay="video playing() mse 
Video> 


然后 就 可 以 在 函数 video_playing() 中 添加 需要 的 代码 。 监 听 方 式 如 下 。 


var videoEl=document .getElementByid("myPlayer"); 
VideoEl.addEventListener ("play",video playing); /* 添加 监听 事件 */ 


audio 和 video 元 素 的 接口 事件 说 明 如 表 6-10 所 示 。 


表 6-10 audio 和 video 元 素 的 接口 事件 
说 明 









接口 事 件 | 
[Bay 当 执行 方法 play() 时 触发 
[EXmoi 正在 播放 时 甬 改 
[GAUSGULL LU 当 执行 方法 pause() 时 触发 
mia 当 播 放 位 置 被 改变 时 触发 ， 可 能 是 播放 过 程 中 的 自然 改变 ， 也 可 能 是 认为 改变 
而 本 可 当 播 放 结 束 后 停止 播放 时 触发 

[WGHngil 上 在 等 待 h 载 下 一 忆 8j 凶 发 

enange 四 | 在 当前 播放 速率 改变 时 触发 

[AGOUmechangel | 在 音量 改变 时 俘 改 

[EGR LU 以 当前 播放 速率 ， 需 要 缓冲 时 触发 

ry 以 当前 播放 谴 率 ， 不 需要 缓冲 时 触发 
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( 续 表 ) 


laurationchange ”| 当 播放 时 长 改变 时 触发 


[ES 当 浏览 器 开始 在 网 上 寻找 数据 时 触发 
[RESS “| 当 浏览 器 正在 获取 媒体 文件 时 触发 


SUsPend “| 当 浏 览 器 暂停 获取 媒体 文件 ， 且 文件 获取 并 没有 正常 结束 时 触发 
ia6567 当中 止 获取 媒体 数据 时 触发 ， 但 这 种 中 止 不 是 由 错误 引起 的 
[Gia 当 获取 媒体 过 程 中 出 错时 触发 
ae 当 所 在 网 络 变 为 初始 化 状态 时 触发 
SEO LU 浏览 器 尝试 获取 媒体 数据 失败 时 触发 
GEGedmieiadala 在 加 载 完 媒体 元 数据 时 触发 
Wadeddai 在 加 载 完 当 前 位 置 的 媒体 播放 数据 时 触发 






[SCeknmg 浏览 器 正在 请 求 数据 时 触发 
[SEEKed 浏览 器 停止 请 求 数据 时 触发 


在 网 页 中 通过 <audio> 或 <video> 标签 说 入 视频 时 ， 如 果 在 标签 中 设置 controls 属性 ， 则 会 在 
网 页 中 显示 音频 或 视频 的 播放 控制 条 ， 使 用 起 来 非常 方便 ， 但 对 于 设计 者 来 说 ， 播 放 控制 条 的 外 观 风 
格 干 篇 一 律 ， 没 有 太 大 的 新 意 。 通 过 对 <audio> 和 <video> 标签 的 接口 方法 和 接口 事件 的 设置 ， 可 
以 自 定义 出 不 同 风格 的 播放 控制 条 ， 使 元 素 在 网 页 中 的 应 用 更 加 个 性 化 。 


自 定义 视频 播放 控制 组 件 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 6 章 \6-6-2.html 。 视频 : 光盘 \ 视 频 \ 第 6 章 \6-6-2.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 6 章 \6-6-2.html”, 可 以 看 到 页 面 效果 ， 
如 图 6-31 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 6-32 所 示 。 









62 
rc-"inages/66208.png" width- 


put "volune" cypernrangen mi 





Menl® srep=re.ln 


nan 
d="rate">1</spam fps <span 1d="info"></span> 











图 6-31 图 6-32 


本 2 为 方便 调用 视频 对 象 ， 把 视频 对 象 定义 为 全 局 变量 ， 在 <head> 与 </head> 标签 之 间 添 加 
JavaScript 脚本 代码 ， 代 码 如 下 。 


Qi1ito 


<script type="text/javascript"> 

/* 定义 全 局 视频 对 象 */ 

Var videoEl=null; 

/* 网 页 加 载 完毕 后 ， 读 取 视 频 对 象 */ 

window.addEventListener("load",function() { 
VideoEl=document .getElementByid ("myplayer") 

和 


</script> 


国 五 ”继续 在 JavaScript 脚本 代码 中 添加 实现 视频 播放 和 暂停 功能 的 JavaScript 脚本 代码 ， 代 码 
如 下 。 


/* 播放 / 暂停 */ 
functionplay(e) { 
if(videoEl.paused) { 
videoEl .play (); 
document .getElementByid ("play") .innerHTML="<img src='images/66204.png'>" 
}elsef{ 
VideoEl.pause (); 
document .getElementByid("play") .innerHTML="<img src='images/66203.png'>" 
} 
} 


[GE 在 id 名 称 为 play 的 <div> 标签 中 添加 触发 事件 ， 输 入 相应 的 脚本 代码 ， 如 图 6-33 所 示 。 
保存 页 面 ， 在 Firefox 浏览 器 中 预览 页 面 ， 单 击 播放 按钮 开始 播放 视频 ， 并 且 播 放 按钮 变 为 暂停 按钮 ， 
单 击 可 以 暂停 视频 的 播放 ， 如 图 6-34 所 示 。 





<div id="play" onClick="play(this)"><img 
src="images/66203.png" width="56" height="31" 
alt=""/></div> 














图 6-33 图 6-34 
提示 此 处 播放 和 暂停 使 用 同一 个 按钮 ， 使 用 if 语句 来 实现 ， 暂 停 时 ， 播 放 功 能 有 效 ， 
可 点 击 播放 视频 ; 播放 时 ， 和 暂停 功 能 有 效 ， 可 点 击 暂 停 播放 。 


葬 划 ”继续 在 JavaScript 脚本 代码 中 添加 实现 视频 前 进 和 后 退 功能 的 JavaScript 脚本 代码 ， 代 码 
如 下 。 
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/* 后退: 后 退 20s*/ 

Eunctionprev() { 
VideoE1.currentTime-=207 

} 

/* 前 进 : 前 进 20s*/ 

function next() { 


VideoEl .currentTime+=20; 


EEE 国 分 别 在 id 名 称 为 prev 和 mext 的 <div> 标签 中 添加 触发 事件 ,输入 相应 的 脚本 代码 ,如 图 6-35 
所 示 。 保 存 页 面 ， 在 Firefox 浏览 器 中 预览 页 面 ， 在 视频 播放 过 程 中 ， 每 单 击 前 进 或 后 退 按钮 一 次 ， 


则 会 向 前 或 向 后 跳 20s， 如 图 6-36 所 示 。 








<div id="prev" onClick="prev()"><img 
src="images/66206.png" width="50" hejght="31" 
alt=""/></div> 
<div id="next" onClick="next()"><img 
src="images/66207.png" width="50" height="31" 
alt=""/></div> 











图 6-35 








图 6-36 


[GE 玫 继续 添加 实现 视频 慢 放 和 快 放 功 能 的 JavaScript 脚本 代码 ， 代 码 如 下 。 


/* 慢 放 : 小 于 等 于 1 时 ， 每 次 只 减 慢 0 . 2 的 速率 ; 
function slow() { 
if (videoEl .playbackRate<=1) 
VideoE]l .playbackRate-=0.2; 
elsef{ 
VideoEl .playbackRate-—=1; 


大 于 1 时 ， 每 次 减 1*/ 


document .getElementByid("rate") .innerHTML=fps2fps (VideoE1l.playbackRate) 7 


} 


/* 快 放 : 小 于 1 时 ， 每 次 只 加 快 0.2 的 速率 ; 大 于 1 时 ， 每 次 加 1*/ 


function fast() { 
if (videoEl .playbackRate<1) 
VideoEl .playbackRate+=0.2; 
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elsef{ 
VideoEl .playbackRate+=1; 
} 
document .getElementByid("rate") .innerHTML=fps2fps (videoE]l .playbackRate); 


} 
/* 速率 数值 处 理 */ 
function fps2fps (fps) { 
if (fps<1) 
return fps.toFixed(1); 
else 
return fps 
} 


一 分 别 在 id 名 称 为 slow 和 fast 的 <div> 标 签 中 添加 触发 事件 ,输入 相应 的 脚本 代码 , 如 图 6-37 
所 示 。 保存 页 面 ， 在 Firefox 浏览 器 中 预览 页 面 ， 在 视频 播放 过 程 中 ， 可 以 单 击 慢 放 或 快 放 按钮 ， 查 
看 慢 放 和 快 放 的 效果 ， 如 图 6-38 所 示 。 








<div id="slow" onCLick="sLow() "><img 


src="jimages/66262.png" wjdth="56" height="31" 
alt=""/></div> 
<div id="pLay" onClick="play (this)"> 
<img src="images/66203.png" width="56"” height 
="31" alt=""/></div> 
<div id="fast" onClick="fast "><img 
src="images/66205.png" width="56" height="31" 
alt=""/></div> 














图 6-37 图 6-38 
此 处 慢 放 和 快 放 是 通过 改变 速率 来 实现 的 。 默认 速率 为 1。 当 速率 小 于 1 时 ， 
每 次 改变 0.2 的 速率 ; 当 速 率 大 于 1 时 ， 每 次 改变 的 速率 为 1。 速率 改变 后 ， 会 在 
播放 工具 条 中 显示 出 来 。 


国 蜀 | 继续 在 JavaScript 脚本 代码 中 添加 实现 视频 静音 和 音量 功能 的 JavaScript 脚本 代码 ， 代 码 如 下 。 


/* 静音 */ 
functionmuted(e) { 
if(videoEl.muted) { 
VideoEl .muted=false; 
e.innerHTML="<img src='images/66208.png'>"; 
document .getElementByid("volume") .value=videoEl .volume; 
}elsef{ 


VideoEl .muted=true; 
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e.innerHTML="<img src="'images/66209.png'>"; 


document .getElementByid("volume") .value=0; 


} 
/* 调整 音量 */ 
functionvolume(e) { 
video.volume=e .value; /* 修改 音量 的 值 */ 


WB 分 别 在 id 名 称 为 muted 的 <div> 标签 和 id 名 称 为 volume 的 <input> 标签 中 添加 触发 事件 ， 
输入 相应 的 脚本 代码 , 如 图 6-39 所 示 。 保存 页 面 , 在 Firefox 浏览 器 中 预览 页 面 , 在 视频 播放 过 程 中 ， 
单 击 静 音 按钮 ， 可 以 实现 静音 效果 ， 再 次 单 击 该 按钮 ， 消 除 静音 ， 如 图 6-40 所 示 。 








<div id="muted" onClick="muted(this)"> 


<img src="images/66208.png" width="26" height 
="24" alt=""/></div> 
<div class="volume"> 
<input id="volume" type="range" min= 
"6" max="1" step="0.1" onChange= 


"volume (this)"> 


</div> 














图 6-39 图 6-40 
”继续 在 JavaScript 脚本 代码 中 添加 显示 视频 时 长 功能 的 JavaScript 脚本 代码 ， 代 码 如 下 。 


function progresss() { 
document .getElementByid ("info") .innerHTML=s2time (videoEl.currentTime)+"/"+s2time 
(videoEl .duration); 
} 
/* 把 秒 处 理 为 时 间 格 式 */ 
function s2time(s) { 
Var m=parseFloat (s/60) .toFixed(0); 
s=parseFloat (s%60) .toFixed(0); 
return (m<102"0"4+m:m) Tm: "3# (3<102"0"t93)» 
于 
window.addEventListener ("load", function() {videoEl .addEvenListener ("timeupdate 
"progress)}); 


window.addEventListener ("load",progress); 


攻 权 国保 存 页 面 , 在 Firefox 浏览 器 中 预览 页 面 ， 通 过 自 定义 的 播放 控制 按钮 ， 可 以 对 视频 的 播放 、 
暂停 、 前 进 、 后 退 、 音 量 等 进行 控制 ， 效 果 如 图 6-41 所 示 。 
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图 6-41 





本 章 主要 讲解 HTML 5 的 音频 和 视频 在 互联 网 方面 的 发 展 ， 以 及 接口 中 的 属性 、 方 法 和 事件 ， 
重点 介绍 了 音频 和 视频 的 基础 知识 ， 还 有 HTML 5 提供 的 音频 和 视频 的 接口 及 如 何 使 用 这 些 接口 。 
其 中 音频 和 视频 都 包含 两 类 属性 ， 容 易 混 淆 ， 所 以 读者 一 定 要 特别 注意 ， 认 真 地 阅读 本 章 ， 准 确 地 理 
解 和 掌握 使 用 HTML 5 在 网 页 中 嵌入 视频 和 音频 的 方法 和 技巧 。 
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章 知识 点 
第 7 章 HTML 5 中 的 表单 国 下 生生 人 
<form> 标签 


一 直 以 来 ， 表 单 都 是 Web 的 核心 技术 之 一 ， 多 数 在 线 应 用 v ee ti i 
都 是 通过 表单 来 交互 完成 的 。 作 为 交互 的 数据 载体 ， 有 必要 为 用 
户 提供 更 加 友好 的 操作 和 严谨 的 表单 验证 ， 这 对 于 大 多 数 Web Y 了 解 HTML 5 表单 的 发 展 以 


和 人 及 作用 
开发 人 员 来 说 ， 是 一 直 在 做 的 事情 。 如 今 ，HTML 5 正在 努力 本 


地 简化 设计 师 的 工作 。 为 此 ，HTML 5 不 但 增加 了 一 系列 功能 表单 输入 类 型 
性 的 表单 、 表 单元 素 、 表 单 属性 ， 还 增加 了 自动 验证 表单 的 功能 。 理解 HTML 5 中 新 增 的 表单 


属性 和 表单 元 素 
A 掌握 HTML 5 中 表单 的 验证 
方法 




















网 站 所 具有 的 功能 不 仅仅 是 给 浏览 者 展示 信息 ， 同 时 还 能 接收 用 户 信息 。 网 络 上 常见 的 留言 本 、 
主 册 系 统 等 都 是 能 够 实现 交互 功能 的 动态 网 页 ， 可 以 使 浏览 者 充分 参与 到 网 页 中 。 可 以 实现 交互 功能 
最 重要 的 HTML 元 素 就 是 表单 ， 掌 握 表单 的 相关 内 容 对 于 以 后 学 习 动 态 网 页 有 很 大 帮助 。 






























































表单 不 是 表格 ， 既 不 用 来 显示 数据 ， 也 不 用 来 布局 网 页 。 表 单 提供 一 个 界面 ， 一 个 入 口 ， 便 了 
户 把 数据 提交 给 后 台 程序 进行 处 理 。 
页 中 的 <form></form> 标签 用 来 创建 表单 ， 定 义 了 表单 的 开始 和 结束 位 置 ， 在 标签 之 间 的 内 
容 都 在 一 个 表单 当中 。 表 单子 元 素 的 作用 是 提供 不 同类 型 的 容器 ， 记 录用 户 的 数据 。 
户 完成 表单 数据 输入 之 后 ， 表 单 将 把 数据 提交 到 后 台 程序 页 面 。 页 面 中 可 以 有 多 个 表单 ， 但 要 
确保 一 个 表单 只 能 提交 一 次 数据 。 


网 页 中 的 <form></form> 标签 用 来 插入 一 个 表单 ， 在 表单 中 可 以 插入 相应 的 表单 元 素 。<form> 
表单 的 基本 语法 格式 如 下 。 


































































































<form name=" 表单 名 称 " action=" 表单 处 理 程序 " method=" 数据 传送 方式 "> 
</form> 


在 表单 的 <form> 标签 中 ， 可 以 设置 表单 的 基本 属性 ， 包 括 表单 的 名 称 、 处 理 程序 和 传送 方法 等 。 
一 般 情况 下 ， 表 单 的 处 理 程序 action 属性 和 传送 方法 method 属性 是 必 不 可 少 的 参数 。action 属性 
用 于 指定 表单 数据 提交 到 哪个 地 址 进行 处 理 ，name 属性 用 于 给 表单 命名 ， 这 一 属性 不 是 表单 所 必需 
的 属性 ， 下 面 一 节 具 体 介绍 表单 的 传送 方法 method 属性 。 


表单 的 method 属性 用 于 指定 在 数据 提交 到 服务 器 时 使 用 哪 种 HTTP 提交 方法 ， 其 值 有 两 种 ， 
get 和 post。 默 认 是 get 方法， 而 post 是 最 常用 的 方法 。 

e get 

get 方法 是 通过 URL 传递 给 程序 的 ， 数 据 容量 小 ， 并 且 数 据 暴露 在 URL 中 ， 非 常 不 安全 。get 
将 表单 中 的 数据 按照 “变量 = 值 ”的 形式 ， 添 加 到 action 所 指向 的 URL 后 面 ， 并 且 两 者 使 用 了 “? ” 
连接 ， 而 各 个 变量 使 用 “&” 连 接 。 

® post 

post 是 将 表单 中 的 数据 放 在 form 的 数据 体 中 ， 按 照 变量 和 值 相对 应 的 方式 ， 传 递 到 action 所 
指向 的 程序 。post 方法 能 传输 大 容量 的 数据 ， 并 且 所 有 操作 对 用 户 来 说 都 是 不 可 见 ， 非 常安 全 。 



































通常 情况 下 ， 在 选择 表单 数据 的 传递 方式 时 ， 简 单 、 少 量 和 安全 的 数据 可 以 使 用 
get 方法 进行 传递 ， 大 量 的 数据 内 容 或 者 需要 保密 的 内 容 则 使 用 post 方法 进行 传递 。 





只 有 一 个 表单 是 无 法 实现 其 功能 的 ， 表 单 标签 只 有 和 它 所 包含 的 具体 表单 元 素 相 结合 才能 真正 实 
现 表 单 收集 信息 的 功能 。 属 于 表单 内 部 的 元 素 比较 多 ， 适 用 于 不 同类 型 的 数据 记录 。 大 部 分 的 表单 元 
素 都 采用 单 标签 <input> ， 不 同 的 表单 元 素 <input> 标签 的 type 属性 取 值 不 同 。 


文本 域 属于 表单 中 使 用 比较 频繁 的 表单 元 素 ， 在 网 页 中 很 常见 。 文 本 域 又 分 为 单行 文本 字段 、 密 
码 框 和 多 行文 本 框 ， 此 处 所 说 的 文本 域 就 是 单行 文本 框 。 
文本 域 的 基本 语法 如 下 。 














<input type="text" value=" 初始 内 容 " size=" 字符 宽度 " maxlength=" 最 多 字符 数 "> 


该 语法 将 生成 一 个 空 的 单行 文本 框 ，value 属性 可 以 设置 其 文字 的 初始 内 容 ; size 属性 可 以 设置 
字符 宽度 ; maxlength 可 以 设置 最 多 容纳 的 字符 数量 。 
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如 果 只 需要 单行 文本 框 显示 相应 的 内 容 ， 而 不 允许 浏览 者 输入 内 容 ， 可 以 在 单 
行文 本 框 的 <input> 标签 中 添加 readonly 属性 ， 并 设置 该 属性 的 值 为 true 。 


密码 域 用 于 输入 密码 ， 在 浏览 者 填 入 内 容 时 ， 密 码 框 内 将 以 星 号 或 其 他 系统 定义 的 密码 符号 显示 ， 
以 保证 信息 安全 。 
密码 域 的 基本 语法 如 下 。 


<input type="password"> 


该 语法 将 生成 一 个 空 的 密码 框 ， 除 了 显示 不 同 的 内 容 外 ， 密 码 框 的 其 他 属性 和 单行 文本 框 一 样 。 


如 果 用 户 需要 输入 大 量 的 内 容 ， 单 行文 本 框 显然 无 法 完成 ， 需 要 用 到 文本 区 域 。 
文本 区 域 的 基本 语法 如 下 。 


<textarea cols=" 宽度 " rows=" 行 数 "></textarea> 


<textarea> 与 </textarea> 之 间 的 内 容 为 文本 区 域 中 显示 的 初始 文本 内 容 。 文 本 区 域 的 常用 属 
性 有 cols( 列 ) 和 rows( 行 )，cols 属性 设 定 文本 区 域 的 宽度 ，rows 属性 设 定 文本 区 域 的 具体 行 数 。 


在 文本 区 域 <textarea> 标签 中 可 以 通过 wrap 属性 控制 文本 的 换行 方法 。 该 属 
性 的 值 有 off、virtual 和 physical。off 值 代表 字符 输入 超过 文本 框 宽度 时 不 会 自动 
换行 ; virtual 值 和 physical 值 都 是 自动 换行 ， 不 同 的 是 virtual 值 输出 的 数据 在 自 
动 换行 处 没有 换行 符号 ，physical 值 输出 的 数据 在 自动 换行 处 有 换行 符号 。 





隐藏 域 在 网 页 中 起 着 非常 重要 的 作用 ， 它 可 以 存储 用 户 输入 的 信息 ， 如 姓名 、 电 子 邮件 地 址 或 常 
用 的 查看 方式 ， 在 用 户 下 次 访问 该 网 站 的 时 候 使 用 这 些 数据 ， 但 是 隐藏 域 在 浏览 页 面 的 过 程 中 是 看 不 
到 的 ， 只 有 在 页 面 的 HTML 代码 才 可 以 看 到 。 

很 多 时 候 传 给 程序 的 数据 不 需要 浏览 者 填写 ， 这 种 情况 下 通常 采用 隐藏 域 传递 数据 。 

隐藏 域 的 基本 语法 如 下 。 


<input type="hidden" value=" 数据 "> 


隐藏 域 在 页 面 中 不 可 见 ， 但 是 可 以 装载 和 传输 数据 。 
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为 了 让 浏览 者 更 快捷 地 在 表单 中 填写 数据 ， 表 单 提供 了 复 选 框 元 素 ， 浏 览 者 可 以 在 复 选 框 中 勾 选 
一 个 或 多 个 选项 。 
复 选 框 的 基本 语法 如 下 。 


<input type="checkbox"> 


在 网 页 中 , 通过 <input type="checkbox"> 插 入 到 网 页 中 的 复 选 框 , 默认 状态 下 是 没有 被 选中 的 ， 
如 果 希 望 复 选 框 默认 就 是 选中 状态 ， 可 以 在 复 选 框 的 <input> 标签 中 添加 checked 属性 设置 。 


单 选 按钮 和 复 选 框 一 样 ， 可 以 快捷 地 让 浏览 者 在 表单 中 写 数据 。 
单 选 按钮 的 基本 语法 如 下 。 


<input type="radio"> 


为 了 保证 多 个 单 选 按钮 属于 同一 组 ， 所 以 一 组 中 每 个 单 选 按钮 都 需要 具有 相同 的 name 属性 值 ， 
操作 时 在 单 选 按钮 组 中 只 能 选 定 一 个 单 选 按钮 。 


通过 选择 域 标 签 <select> 和 <option> 可 以 在 网 页 中 建立 一 个 列表 或 者 菜单 。 在 网 页 中 ， 菜 单 
可 以 节省 页 面 的 空间 ， 正 常 状态 下 只 能 看 到 一 个 选项 ， 单 击 下 拉 按 钮 打开 菜单 后 ， 才 可 以 看 到 全 部 的 
选项 ;列表 可 以 显示 一 定数 量 的 选项 ， 如 果 超 出 这 个 数值 ， 则 会 出 现 滚动 条 ， 浏 览 者 便 可 以 通过 拖 动 
滚动 条 来 查看 各 个 选项 。 

选择 域 标签 <select> 和 <option> 语法 格式 如 下 。 


<formid-"forml" name="forml" method="post" action=""> 
<select name="name" id="name"> 
<option> 选项 一 </option> 
<option> 选项 二 </option> 
<option> 选项 三 </option> 
</select> 


</form> 


<select> 和 <option> 标签 的 相关 属性 说 明 如 表 7-1 所 示 。 
表 7-1 <select> 和 <option> 标签 的 相关 属性 说 明 


说 了 明 
name 属性 用 于 设置 选择 域 的 名 称 


name 
[SC size 属 性 用 于 设置 列表 的 行 数 
vaue 
multipe 





Value 属性 用 于 设置 菜单 的 选项 值 
multiple 属性 表示 以 菜单 的 方式 显示 信息 ， 省 略 则 以 列表 的 方式 显示 信息 
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文件 域 可 以 让 用 户 在 域 的 内 部 填写 文件 路 径 ， 然 后 通过 表单 上 传 ， 这 是 文件 域 的 基本 功能 。 如 在 
线 发 送 E-mail 时 常见 的 附件 功能 。 有 的 时 候 要 求 用 户 将 文件 提交 给 网 站 ， 例 如 Office 文档 、 浏 览 者 
的 个 人 照片 或 者 其 他 类 型 的 文件 ， 这 时 候 就 要 用 到 文件 域 。 

文件 域 的 基本 语法 如 下 。 





<input type="file"> 


文件 域 是 由 一 个 文本 框 和 一 个 “浏览 ”按钮 组 成 。 浏 览 者 可 以 通过 表单 的 文件 域 来 上 传 指定 的 文 
件 ， 浏 览 者 既 可 以 在 文件 域 的 文本 框 中 输入 一 个 文件 的 路 径 ， 也 可 以 单 击 文件 域 的 “浏览 ”按钮 来 选 
择 一 个 文件 ， 当 访问 者 提交 表单 时 ， 这 个 文件 将 被 上 传 。 


HTML 中 的 按钮 有 着 广泛 的 应 用 ， 根 据 type 属性 的 不 同 可 以 分 为 3 种 类 型 。 
按钮 表单 元 素 的 基本 语法 如 下 。 


普通 按钮 : <input type="button"> 
重 置 按钮 : <input type="reset"> 
提交 按钮 : <input type="submit"> 


普通 按钮 需要 JavaScript 技术 进行 动态 行为 的 编程 ， 重 置 按钮 即 当 浏览 者 单 击 该 按钮 ， 表 单 中 
所 有 表单 元 素 将 恢复 初始 值 ; 提交 按钮 即 当 浏览 者 单 击 该 按钮 ， 所 属 表单 提交 数据 。 

对 于 表单 而 言 ， 按 钮 是 非常 重要 的 ， 其 能 够 控制 对 表单 内 容 的 操作 ， 如 “提交 ”或 “ 重 置 ”。 如 
果 要 将 表单 内 容 发 送 到 远 端 服 务 器 上 , 可 使 用 “提交 ”按钮 ， 如 果 要 清除 现 有 的 表单 内 容 , 可 使 用 “ 重 
置 ”按钮 。 如 果 需 要 修改 按钮 上 的 文字 ， 可 以 在 按钮 的 <input> 标签 中 修改 value 属性 值 。 


使 用 默认 的 按钮 形式 往往 会 让 人 觉得 单调 , 如果 网 页 使 用 了 较为 丰富 的 色彩 , 或 稍微 复杂 的 设计 ， 
再 使 用 表单 默认 的 按钮 形式 甚至 会 破坏 整体 的 美感 。 这 时 ， 可 以 使 用 图 像 域 创建 和 网 页 整体 效果 相 统 
一 的 图 像 提交 按钮 。 

表单 提供 的 图 像 域 元 素 可 以 替代 提交 按钮 ， 实 现 提交 表单 的 功能 。 

图 像 域 的 基本 语法 如 下 。 


<input type="image" src=" 图 片 路 径 "> 


默认 情况 下 ， 图 像 域 只 能 起 到 提交 表单 数据 的 作用 ， 不 能 起 到 其 他 的 作用 ， 如 
果 想 要 改变 其 用 途 ， 则 需要 在 图 像 域 标签 中 添加 特殊 的 代码 来 实现 。 
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制作 登录 表单 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 7 章 \7-2-10.html 。 视频 : 光盘 \ 视 频 \ 第 7 章 \7-2-10.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 7 章 \7-2-10.html”， 可 以 看 到 页 面 效果 ， 如 图 7-1 所 示 。 
转换 到 代码 视图 中 ， 可 以 看 到 该 网 页 的 HTML 代码 ， 如 图 7-2 所 示 。 


| 此 





了 色 . 用 户 登 录 idoctype heml> 
<html> 
<head> 
<meta charset="utf-a"> 
<tittLe> 制 作 登 录 表单 </titte> 
<Link href="style/7-2-10.css" rel="stylesheet" type="text/css"> 
</head> 





<body> 
<div id="box"> 

<div 1d="login"> 此 处 显示 。1d "login” 的 内 容 </div> 
</div> 











</body> 
0D </html> 
图 7-1 图 7-2 


[ 王 在 <div id="login"> 与 </div> 标签 之 间 ， 将 多 余 的 文字 删除 ， 输 入 表单 域 <form> 标签 ， 
如 图 7-3 所 示 。 在 表单 域 <form> 与 </form> 标签 之 间 输 入 文字 并 添加 文本 域 代码 ， 如 图 7-4 所 示 。 











<body> 
<body> <div id="box"> 
<div id="box"> <div id="login"> 
<div id="login"> <form 1d="forml" name="forml method="post"> 
<form id="forml" name="forml" method="post"> 用 户 名 : -input type="text" name="uname” jd="uname"> 




















</form> /form 
</div> </div> 
</div> </div> 
</body> </body> 
图 7-3 图 7-4 


在 表单 域 <form> 与 </form> 之 外 插入 的 所 有 表单 元 素 并 不 会 起 到 任意 的 作用 ， 
表单 域 是 表单 中 必 不 可 少 的 元 素 之 一 ， 所 有 的 表单 元 素 只 有 在 表单 域 中 才 会 生效 。 





[王国 返回 网 页 设计 视图 中 ， 可 以 看 到 页 面 中 文本 域 的 显示 效果 ， 如 图 7-5 所 示 。 保 存 页 面 ， 在 浏 
览 器 中 预览 页 面 ， 可 以 看 到 文本 域 默 认 的 显示 效果 ， 如 图 7-6 所 示 。 
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GE 返回 网 页 的 HTML 代码 中 , 在 刚 添加 的 文本 域 代码 后 输入 换行 符 标签 <br>, 如 图 7-7 所 示 。 
在 <br> 标签 之 后 输入 文字 并 添加 密码 域 代码 ， 如 图 7-8 所 示 。 

<body> 

<div id="box"> 
































ogin"> i 请 SR 
fords amenforial" wethod="posto Deter et ed tt 
用 户 名 : <input type="text" name="uname" id="uname"><br> i RaGENLGs +" 
</form> aa 
</div> </div> 
</div> </div> 
</body> </body> 
图 7-7 








图 7-8 
[天 国运 回 网 页 设计 视图 中 ， 可 以 看 到 页 面 中 密码 域 的 显示 效果 ， 如 图 7-9 所 示 。 保 存 页 面 ， 在 浏 
览 器 中 预览 页 面 ， 可 以 看 到 密码 域 默 认 的 显示 效果 ， 如 图 7-10 所 示 。 





图 7-9 


图 7-10 
荐 国 返回 网 页 的 HTML 代码 中 ， 在 刚 添加 的 密码 域 代码 后 输入 换行 符 标签 <br>， 在 <br> 标签 
之 后 输入 文字 并 添加 文本 域 代码 ， 如 图 7-11 所 示 。 在 刚 添加 的 文本 域 代码 后 插入 图 像 ， 如 图 7-12 
所 示 。 


<div 1d="box"> 
<div 1d="login"> 








<form id="forml" name="forml" method="post"> 
用 户 名 


+ <input type="text" nane="uname" id="uname"> <br> 
密码 ; <input type="password" name="upass" jd="upass"><br> 
验证 码 : -in 









+ <input type="text" name= 
密 码 : cfnput type="password" 
验证 码 
It type="text" name="yz" id="yz"> 
</form> 
</div> 
</div> 








nput type="text" name: 


<img src="images/7205.png" width="102" height="42" alt=""> 
Re 
</div> 
</div> 


</body> 


</body> 











图 7-11 








图 7-12 
轴 。” 返回 网 页 设计 视图 中 , 可 以 看 到 页 面 中 文本 域 和 图 像 的 显示 效果 , 如 图 7-13 所 示 。 保存 页 面 ， 
在 浏览 器 中 预览 页 面 ， 效 果 如 图 7-14 所 示 。 
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图 7-13 图 7-14 


5 本 ”返回 网 页 的 HTML 代码 中 ， 在 刚 添加 的 验证 码 图 像 代 码 后 输入 换行 符 标签 <br>， 在 <br> 
标签 之 后 输入 复 选 框 代码 和 文字 ， 如 图 7-15 所 示 。 返 回 网 页 设计 视图 中 ， 可 以 看 到 页 面 中 复 选 框 的 
显示 效果 ， 如 图 7-16 所 示 。 





<body> 
<div jd="box"> 
<div 1d="login"> 
<form id="forml" name="forml" nethod="post"> 
用 户 名 : <input type="text" nape="uname” id="uname"> <br> 
密 码 ; <input type="password" name="upass" 1d="upass"><br> 
验证 码 : <input type="text" nane="yz" jd="yz"> 
<img src="images/7265.png" widi t="42" alt=""><br> 
<input_ type="checkbox" nane="checkbox" id="checkbox"> 记 住 
</Form> 
</div> 
</div> 
</body> 














图 7-15 图 7-16 


国 5 国 | 返回 网 页 的 HTML 代码 中 ， 在 “ 记 住 密码 ”文字 之 后 输入 换行 符 标签 <br>， 在 “br> 标签 
之 后 输入 图 像 域 代码 ， 如 图 7-17 所 示 。 返 回 网 页 设计 视图 中 ， 可 以 看 到 页 面 中 图 像 域 的 显示 效果 ， 
如 图 7-18 所 示 。 





<body> 
<div 1d="box"> 

<div 1d="login"> 

<form id="forml" name="forml" nethod="post"> 

‘ext" name="uname" ="uname"> <br> 
assword" name="upass" 1d="upass"><br> 
ext" nane="yz" 1d="yz"> 
g" width="102" height="42" alt=""><br> 
="checkbox”4d="checkbox"> 记 住 密码 <br>| 有 

"jd="btn" src="images/7206.png"> 















</div> 
</body> 














图 7-17 图 7-18 


”保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 各 表单 元 素 默 认 的 显示 效果 ， 如 图 7-19 所 示 。 
转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ,创建 名 为 #uname 的 CSS 样式 ， 如 图 7-20 所 示 。 
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#uname { 
width: 265px; 
height: 42px; 
border: none; 
background-image: url(../images/7202.png); 
background-repeat: no-repeat; 
padding-left: 52px; 
margin: Spx 9px Spx Opx; 











图 7-19 图 7-20 





在 “用 户 名 ”文字 后 的 文本 域 代码 <input> 标签 中 设置 了 id 属性 为 uname， 
所 以 此 处 创建 id CSS 样式 对 指定 id 名 称 的 网 页 元 素 进行 设置 。 关 于 CSS 样式 将 在 
S 后 面 的 章节 中 进行 详细 介绍 。 


鲁 轩 返回 网 页 设计 视图 中 , 可 以 看 到 页 面 中 “用 户 名 ”文字 后 的 文本 域 的 效果 , 如 图 7-21 所 示 。 
转换 到 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 #Upass 和 名 为 #yz 的 CSS 样式 ， 如 图 7-22 所 示 。 





supass 
width: 265px; 
height: 42px; 
border: none; 
background-image: url(../images/7203.png); 
background-repeat: no-repeat; 
padding-left: 52px; 
margin: Spx Opx Spx Opx; 


syz { 
width: 98px; 
height: 42px; 
border: none; 
background-image: url(../images/7204.png); 
background-repeat: no-repeat; 
padding-left: 52px; 
margin: Spx Opx Spx Opx; 














图 7-21 图 7-22 


了 于] 返回 网 页 设计 视图 中 ， 可 以 看 到 页 面 中 密码 域 和 文本 域 的 效果 ， 如 图 7-23 所 示 。 转 换 到 外 部 
CSS 样式 表 文件 中 , 创建 名 为 .pic01 的 类 CSS 样式 和 名 为 #checkbox 的 CSS 样式 , 如 图 7-24 所 示 。 





.picol { 
vertical-align: middle; 





} 
#checkbox { 
margin: 10px 10px 20px QOpx; 











} 


7-23 图 7-24 
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配 国 返回 网 页 HTML 代码 中 ， 在 “验证 码 ” 文 本 后 的 图 像 中 添加 class 属性 ， 应 用 名 为 pic01 
的 类 CSS 样式 ， 如 图 7-25 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 
可 以 看 到 所 制作 的 登录 表单 页 面 的 效果 ， 如 图 7-26 所 示 。 














HTML 5 对 表单 的 改进 ， 是 适应 互联 网 发 展 的 需要 ， 也 是 在 适应 开发 者 的 需要 。 相 比 以 前 ， 
HTML 5 的 表单 功能 有 了 革命 性 的 改变 。 


早 在 20 世纪 90 年 代 的 HTML 4 的 规范 中 ， 表 单 功能 已 经 发 展 得 非常 完善 。HTML 4 的 表单 很 
单纯 ， 支 持 最 基本 的 数据 输入 ， 所 有 的 表单 应 用 都 可 以 使 用 ， 时 至 今日 ， 我 们 仍然 在 使 用 它 。 

随 着 Web 应 用 的 发 展 ， 表 单 功能 太 过 简单 ， 在 处 理 复杂 业务 的 过 程 中 ， 显 得 能 力 有 限 ， 而 且 还 
受到 网 络 设备 的 限制 。 基 于 这 个 原因 ， 出 现 了 基于 XML 的 XHTML 规范 ， 与 此 同时 出 现 了 XForms 
表单 ， 基 于 HTML 4 的 表单 也 停止 了 发 展 。 

XForms 试图 突破 当前 HTML Forms 模型 的 一 些 限制 ， 而 且 XForms 的 最 大 特色 是 包含 了 客 
户 端 验证 的 功能 ， 避 免 使 用 大 量 的 JavaScript 脚本 验证 。 在 当时 ，XForms 被 称 为 “下 一 代 Web 
表单 ”。 

由 于 XForms 是 基于 XML 的 ， 在 一 定 程度 上 弱化 了 标签 本 身 的 功能 ;由 于 其 比较 灵活 ， 表 单 也 
跟着 复杂 了 。 这 在 实际 的 使 用 过 程 中 ， 并 没有 得 到 广泛 的 发 展 。 


在 实际 的 表单 应 用 中 ， 一 些 特殊 的 数据 输入 需要 一 个 独立 的 规则 ， 如 邮件 、 网 址 等 ， 都 会 提供 一 
个 特定 的 格式 限定 和 验证 。 

由 于 移动 互联 网 的 快速 发 展 ， 在 面向 移动 设备 的 时 候 ， 通 过 识别 表单 类 型 ， 可 以 提供 更 友好 的 用 
户 体验 ， 如 可 以 呈现 不 同 的 屏幕 键盘 等 。 

HTML 5 的 表单 , 在原 有 表单 的 基础 上 , 参照 XForms 的 一 些 验证 功能 , 再 结合 实际 发 展 的 需要 ， 
制定 了 新 型 的 功能 性 表单 ， 并 且 支 持 表单 验证 。 

在 进行 表单 处 理 的 时 候 , 最 常用 的 就 是 表单 验证 了 ,一 般 的 验证 会 写 很 多 见长 的 JavaScript 代 码 ， 
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或 者 借助 一 些 基 于 JavaScript 的 验证 框架 ， 如 目前 比较 流行 的 jQuery 的 验证 框架 。HTML 5 发 展 
了 这 些 表单 ， 把 具有 特定 规则 意义 的 表单 扩展 一 些 特 有 的 特性 ， 作 为 表单 的 原始 功能 ; 验证 表单 的 功 
能 也 作为 表单 本 身 应 具备 的 功能 ， 原 生地 被 支持 。 

HTML 5 的 表单 ， 无 论 是 在 表现 方面 还 是 在 功能 方面 都 非常 优越 ， 开 发 起 来 可 以 不 用 那么 复杂 。 
HTML 5 的 表单 的 目的 就 是 让 这 一 切 友好 的 应 用 变 得 简单 。 


由 于 HTML 5 的 规范 还 在 渐进 发 展 中 ， 各 个 浏览 器 的 支持 程度 也 不 一 样 ， 因 此 在 使 用 HTML 5 
表单 功能 时 ， 应 尽量 避免 滥用 ， 最 好 再 提供 蔡 代 解决 方案 。 

根据 HTML 5 的 设计 原则 ， 在 旧 的 浏览 器 中 ， 新 的 表单 空间 会 平滑 降级 ， 不 需要 判断 浏览 器 的 
支持 情况 。 

虽然 HTML 5 表单 的 一 些 规范 还 没有 获得 浏览 器 的 支持 ， 但 仍然 可 以 借鉴 表单 规范 的 设计 思想 ， 
如 果 浏 览 器 不 支持 ， 还 可 以 通过 其 他 方式 帮助 实现 。 


HTML 5 大 幅度 地 改进 了 <input> 标签 的 类 型 。 不 同类 型 的 表单 元 素 所 附加 的 功能 也 不 相同 。 
到 目前 为 止 ， 对 HTML 5 新 增 表单 元 素 支持 最 多 、 最 全 面 的 浏览 器 是 Opera 浏览 器 。 对 于 不 支持 新 
增 表 单 类 型 的 浏览 器 来 说 ， 会 默认 识别 为 text 类 型 ， 即 显示 为 普通 文本 域 。 


ur| 类 型 的 input 元 素 ， 是 专门 为 输入 url 地 址 定义 的 文本 框 。 在 验证 输入 文本 的 格式 时 ， 如 果 该 
文本 框 中 的 内 容 不 符合 url 地 址 的 格式 ， 会 提示 验证 错误 。 
url 表单 类 型 的 使 用 方法 如 下 。 


<input type="url" name="weburl" id="weburl" value="http://www.baidu.com"> 


email 类 型 的 input 元素， 是 专门 为 输入 E-mail 地 址 定义 的 文本 框 。 在 验证 输入 文本 的 格式 时 ， 
如 果 该 文本 框 中 的 内 容 不 符合 E-mail 地 址 的 格式 时 ， 会 提示 验证 错误 。 
email 表单 类 型 的 使 用 方法 如 下 。 


<input type="email" name="myEmail" id=" myEmail" value="xxxxxx@163.com"> 


此 外 ，email 类 型 的 input 元 素 还 有 一 个 multiple 属性 ， 表 示 在 该 文本 框 中 可 输入 用 逗号 隔 开 的 
多 个 邮件 地 址 。 


range 类 型 的 input 元 素 把 输入 框 显示 为 滑动 条 ， 为 某 一 特定 范围 内 的 数值 选择 器 。 它 还 具有 
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min 和 max 属性 ， 表 示 选 择 范围 的 最 小 值 ( 默认 为 0) 和 最 大 值 ( 默认 为 100); 还 有 step 属性 ， 表 
示 拖 动 步 长 ( 默认 为 1)。 
range 表单 类 型 的 使 用 方法 如 下 。 


<input type="range" name="volume" id="volume" min="0" max="10" step="2"> 


range 表单 类 型 的 显示 效果 如 图 7-27 所 示 。 


number 类 型 的 input 元 素 是 专门 为 输入 特定 的 数字 而 定义 的 文本 框 。 与 range 类 型 类 似 ， 都 具 
有 min、max 和 step 属性 ， 表 示人 允许 范围 的 最 小 值 、 最 大 值 和 调整 步 长 。 
number 表单 类 型 的 使 用 方法 如 下 。 


<input type="number" name="score" id="score" min="0" max="10" step="0.5"> 


number 表单 类 型 的 显示 效果 如 图 7-28 所 示 。 








SS sers dministrat ~ | 
| 文 作 (。 痪 得 E) 吾 看 V) “收藏 灾 A) Ey 





| [vf | 


你 必 须 洽 入 介 于 0 到 10 之 间 的 值 





图 7-27 图 7-28 


tel 类 型 的 input 元 素 是 专门 为 输入 电话 号 码 而 定义 的 文本 框 ， 没 有 特殊 的 验证 规则 。 
tel 表单 类 型 的 使 用 方法 如 下 。 


<input type="tel" name="tel" id="tel"> 


search 类 型 的 input 元 素 是 专门 为 输入 搜索 引擎 关键 词 定义 的 文本 框 ， 没 有 特殊 的 验证 规则 。 
Search 表单 类 型 的 使 用 方法 如 下 。 


<input type="search" name="search" id="search"> 


color 类 型 的 input 元 素 ， 默 认 会 提供 一 个 颜色 选择 器 ， 主 流 浏览 器 还 没有 支持 它 。 
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color 表单 类 型 的 使 用 方法 如 下 。 


<input type="color" name="color" id="color"> 


在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 颜色 表单 元 素 的 效果 ， 如 图 7-29 所 示 。 单 击 颜色 表 
单元 素 的 颜色 块 ， 弹 出 “颜色 ”对 话 框 ， 可 以 选择 颜色 ， 如 图 7-30 所 示 。 选 中 颜色 后 ， 单 击 “ 确 定 ” 
按钮 ， 如 图 7-31 所 示 。 





© Dfile///C/Users/Admii? 三 


coler: mm 














图 7-29 





date 类 型 的 input 元 素 是 专门 用 于 输入 日 期 的 文本 框 ， 默 认为 带 日 期 选择 器 的 输入 框 。 
date 表单 类 型 的 使 用 方法 如 下 。 


<input type="date" name="date" id="date"> 


在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 date 表单 类 型 的 显示 效果 ， 如 图 7-32 所 示 。 可 以 通 
过 在 文本 框 右 侧 的 向 下 箭头 图 标 ， 在 弹出 的 面板 中 选择 相应 的 日 期 ， 如 图 7-33 所 示 。 
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图 7-32 图 7-33 


month、week、time、datetime、datetime-local 类 型 的 input 元 素 与 date 类 型 的 input 元 
素 类 似 ， 都 会 提供 一 个 相应 的 选择 器 。 其 中 ，month 会 提供 一 个 月 选择 器 ; week 会 提供 一 个 周 选择 
器 ; time 会 提供 时 间 选 择 器 ; datetime 会 提供 完整 的 日 期 和 时 间 ( 包含 时 区 ) 的 选择 器 ; datetime- 
local 也 会 提供 完整 的 日 期 和 时 间 ( 不 包含 时 区 ) 选择 器 。 

month、week、time、datetime、datetime-local 表单 类 型 的 使 用 方法 如 下 。 
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<input type="month" name="month" id="month"> 

<input type="week" name="week" id="week"> 

<input type="time" name="time" id="time"> 

<input type="datetime" name="datetime" id="datetime"> 


<input type="datetime-local" name="datetime-local" id="datetime-local"> 
在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 HTML 5 中 时 间 和 日 期 表单 元 素 的 效果 ， 如 图 7-34 


所 示 。 可 以 通过 在 文本 框 中 输入 时 间 和 日 期 ， 或 者 在 不 同类 型 的 时 间 和 日 期 选择 器 中 选择 时 间 和 日 期 ， 
如 图 7-35 所 示 。 
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图 7-34 图 7-35 


制作 留言 表单 页 面 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 7 章 \7-4-9.html 。 视频 : 光盘 \ 视 频 \ 第 7 章 \7-4-9.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 7 章 \7-4-9.html”, 页 面 效 果 如 图 7-36 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 页 面 的 HTML 代码 ， 如 图 7-37 所 示 。 




















CI Za 二 人 Weaewsa 用 | [<!1doctype htmt> 
<html> 
<head> 
i <meta charset="utf-8"> 
留言 析 <title> 制 作 留言 表单 页 面 </title> 
<Link href="style/7-4-9.css" rel="stylesheet" type="text/css"> 
? </head> 
<body> 
<div id="forml"> 
<form method="post"” id="myform"> 
SX <p class="head"> 留 言 板 </p> 
<p> 这 是 布局 P 标签 的 内 容 </p> 
<1form> 
</div> 
全 > 电 </body> 
jp Co = en </html> 
图 7-36 图 7-37 


[GE 王将 光标 移 至 <p> 与 </p> 标签 之 间 ， 将 多 余 文 字 删 除 ， 输 入 相应 的 文字 并 添加 <input> 标签 
插入 文本 域 , 如 图 7-38 所 示 。 返回 网 页 设计 视图 中 , 可 以 看 到 所 插入 的 文本 域 的 显示 效果 , 如 图 7-39 
所 示 。 
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<div id="forml"> 
<form method="post"” id="myform"> 
<p class="head"> 留 言 板 </p> 
<p> 
姓名 : <input type="text" name="uname" jd="uname" 
placeholder=" 
EE 
</form> 
</div> 














图 7-38 图 7-39 


国 3 思 ” 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 .input01 的 类 CSS 样式 ， 如 图 
7-40 所 示 。 返 回 网 页 HTML 代码 中 ， 在 刚 添加 的 文本 域 <input> 标签 中 添加 class 属性 ， 应 用 名 
为 input01 的 类 CSS 样式 ， 如 图 7-41 所 示 。 





<div id="forml"> 





form method="post" 1d="myform"> 
.input6el { | "> 留 
margin-left: 160px; pe i 
width: 260px; 


姓名 : <input type="text" name="uname" jd="uname" 


height: 36px; placeholder=" 请 输入 姓名 " class="input81"> 


border: solid 2px #960; 

















</p> 
border-radius: 3px; </form> 
} </div> 
图 7-40 图 7-41 


区 ”返回 网 页 设计 视图 中 ， 可 以 看 到 文本 域 的 显示 效果 ， 如 图 7-42 所 示 。 转 换 到 网 页 HTML 代 
码 中 ， 在 文本 域 所 在 的 段落 之 后 添加 段落 标签 ， 输 入 相应 的 文字 并 添加 <input> 标签 插入 电子 邮件 表 
单元 素 ， 如 图 7-43 所 示 。 





<div 1d="forml"> 
<form method="post" 1d="myform"> 
<p class="head"> 留 言 板 </p> 










姓名 : <input type="text" name="uname" 1d="uname" 
piaceholLder=" 请 给 " class="inputel"> 





4" name="umail" id="umail" 
clLass="inputel"> 











图 7-42 图 7-43 


[E 国 ”返回 网 页 设计 视图 中 ， 可 以 看 到 电子 邮件 表单 元 素 的 显示 效果 ， 如 图 7-44 所 示 。 转 换 到 网 
页 HTML 代码 中 ， 在 电子 邮件 表单 元 素 所 在 的 段落 之 后 添加 段落 标签 ， 分 别 添加 url 表单 元 素 和 tel 
表单 元 素 ， 如 图 7-45 所 示 。 
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<div TmFormi™y 
<forn method="post” 3d="myform"> 
<p class="head"> 留 言 板 </p> 


丈 名 :cirput type="text" nane="uname" jd-"uname" 
piacshold=r=" 请 输入 姓名 " class="inpute1"> 
</p> 





邮箱 :cinput type="enail" nam 
piaceholdzr=" 请 罚 入 EMail 地 址 "clas: 
</p> 
p> 
网 幅 : cinput type="url" nane=nmyurt' jd="myurl" 
Tacehold=r=" 请 罚 入 您 的 网 址 "ciass="input@1"> 
</p> 
cp> 
电话 : cinput type="tel" name="utel" jd="utel" 
iaceahctLdar=" 请 输入 您 的 电话 ”ciass=ninputeln 
/p> 


</div> 


="umail" id="unail™" 
"inputel"> 

















图 7-44 图 7-45 


国葬 使 用 相同 的 制作 方法 , 编写 其 他 的 表单 元 素 代码 , 并 创建 相应 的 CSS 样式 为 其 应 用 , 如 图 7-46 


所 示 。 保 存 页 面 ,在 Chrome 浏览 器 中 预览 页 面 , 可 以 看 到 页 面 中 HTML 5 表单 元 素 的 效果 , 如 图 7-47 
所 示 。 








MS C53 Re MNT 4M 
年 龄 : <input name="range" type="range" id="range" max= 
"a@" min="28" step="1" class="inpute2"> 
</p> 
<p> 
日 期 : <input type="date" name="udate" id="udate" class= 
Hinputeln> 
</p> 
<p> 
言 :<textarea name="textarea 1d="textarea" cols="40" 
rows="10" class="inpute3"></textarea> 
</p> 
<input jd="submit" nane="submit" type="image" src= 
"images/74902.g1f" > 
</fore 
</div> 














图 7-46 图 7-47 


[CR 当 在 电子 邮件 表单 元 素 中 填写 的 电子 邮箱 格式 不 正确 时 ， 单 击 “提交 ”按钮 ， 网 页 会 弹出 
相应 的 提示 信息 ， 如 图 7-48 所 示 。 可 以 在 日 期 表单 元 素 的 选择 器 中 选择 需要 的 日 期 ， 如 图 7-49 
所 示 。 
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如 果 开 发 一 个 用 户 体验 非常 好 的 页 面 ， 需 要 编写 大 量 的 代码 ， 而 且 还 需要 考虑 兼容 性 问题 。 使 用 
HTML 5 表单 的 某 些 特性 ， 可 以 开发 出 前 所 未 有 的 页 面 效 果 ， 可 以 写 更 少 的 代码 ， 并 能 解决 传统 开发 
中 碰 到 的 一 些 问题 。 


通常 ， 从 属于 表单 的 元 素 必须 放 在 表单 内 部 。 但 是 在 HTML 5 中 ， 可 以 把 从 属于 表单 的 元 素 放 
在 任何 地 方 ， 然 后 指定 该 元 素 的 form 属性 值 为 表单 的 id， 这 样 该 元 素 就 从 属于 表单 了 。 例 如 下 面 的 
HTML 代码 。 


<input type="text" id="uname" name="uname" form="forml"> 
<form id="forml" name="forml" method="post"> 
<input type="submit" value=" 提交 "> 


</form> 


在 以 上 这 段 HTML 代码 中 ， 使 用 <input> 标签 实现 的 文本 域 放 置 在 表单 <form> 与 </form> 标 
签 之 外 ， 由 于 <input> 标签 中 的 form 属性 值 指 定 了 表单 的 id， 说 明 该 表单 元 素 从 属于 表单 。 当 单 击 
提交 按钮 时 ， 会 验证 该 从 属 元素 。 目 前 ，form 属性 已 获得 主流 浏览 器 的 支持 。 


每 个 表单 都 会 通过 action 属性 把 表单 内 容 提交 到 另 一 个 页 面 。 在 HTML 5 中 ， 为 不 同 的 提交 按 
钮 分 别 添加 formaction 属性 ， 该 属性 会 覆盖 表单 的 action 属性 ， 将 表单 提交 至 不 同 的 页 面 。 例 如 下 
面 的 HTML 代码 。 


<form id="forml" name="forml" method="post"> 
<input type="text" id="uname" name="uname" form="forml"> 
<input type="submit" value=" 提交 到 页 面 1" formaction="?page=1"> 
<input type="submit" value=" 提交 到 页 面 2" formaction="?page=2"> 
<input type="submit" Value=" 提交 到 页 面 3" formaction="?page=3"> 
<input type="submit" value=" 提交 "> 


</form> 


在 以 上 的 HTML 代码 中 ， 添 加 了 4 个 提交 按钮 ， 其 中 前 3 个 提交 按钮 设置 了 formaction 属性 ， 
提交 表单 时 ， 会 优先 使 用 formaction 属性 值 作为 表单 提交 的 目标 页 面 。 目 前 ，formaction 属性 已 获 
得 主流 浏览 器 的 支持 。 


这 4 个 属性 的 使 用 方法 与 formaction 属性 一 致 ， 设 置 在 提交 按钮 上 ， 可 以 覆盖 表单 的 相关 属性 。 
formmethod 属性 可 覆盖 表单 的 method 属性 ; formenctype 属性 可 覆盖 表单 的 enctype 属性 ; 
formnovalidate 属性 可 履 盖 表单 的 novalidate 属性 ; formtarget 属性 可 覆盖 表单 的 target 属性 。 
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当 用 户 还 没有 把 焦点 定位 到 输入 文本 框 的 时 候 ， 可 以 使 用 placeholder 属性 向 用 户 提示 描述 的 信 
息 ， 当 该 输入 文本 框 获取 焦点 时 ， 该 提示 信息 就 会 消失 。 
placeholder 属性 的 使 用 方法 如 下 。 


<input type="text" id="uname" name="uname" placeholder=" 请 输入 用 户 名 "> 


placeholder 属性 还 可 用 于 其 他 输入 类 型 的 input 元 素 ， 如 url、email、number、search、tel 
和 password 等 。 目 前 ，placeholder 属性 已 获得 主流 浏览 器 的 支持 。 
为 表单 元 素 设置 默认 提示 内 容 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 7 章 \7-5-4.html ”视频 : 光盘 \ 视 频 \ 第 7 章 \7-5-4.mp4 
[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 7 章 \7-5-4.html”， 可 以 看 到 页 面 效果 ， 如 图 7-50 所 示 。 
转换 到 代码 视图 ， 可 以 看 到 页 面 中 表单 部 分 的 HTML 代码 ， 如 图 7-51 所 示 。 


CI 疏 呈 hitgwun 用 国庆 


各。 用户 登录 











gin"> 
"forml" nane="forml" method="post"> 
t type="text" nase="uname" 1d="uname"> <br> 

密 码 : *1nput type="password" name="upass" "upass"> <br> 

验证 取 : *1nput type="text" nane="yz" 1d="yz"> 

<img src="images/7205.png" width="162" height="42" alt="" 
class="picel"><br> 

<input type="checkbox" name="checkbox” 1d="checkbox"> 记 住 
密码 <br> 

cinput type="1mage" nase="btn" 1d="btn" src= 
"images/7206.png"» 

<jformy 































图 7-50 图 7-51 


国 z 出 ”在 “用 户 名 ”文字 后 的 <input> 标签 中 添加 placeholder 属性 设置 ， 如 图 7-52 所 示 。 保 存 
页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 该 文本 域 所 设置 的 默认 提示 内 容 ， 如 图 7-53 所 示 。 





<div 1d="login"> 
<form jd="forml" name="forml" method="post"> 





TPe="password" name= a A "upass"> <br> 
nput type="text" name="yz" id=" 
ges/7205.png" width="162" eght=" "42" alt="" 


"checkbox" name=ncheckbox" jd="checkbox"> 记 住 


<input type="image" name="btn" id="btn" src= 
"images/7296.png"> 
</form> 
</div> 














图 7-52 图 7-53 


葬 畏 ”返回 网 页 HTML 代码 中 ， 分 别 在 “密码 ”和 “验证 码 ” 文 字 后 的 <input> 标签 中 添加 
placeholder 属性 设置 ， 如 图 7-54 所 示 。 保 存 页 面 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 表单 元 素 设 
置 默认 提示 内 容 的 效果 ， 如 图 7-55 所 示 。 
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<div id="login"> 
<form jd="formlw nape=n"forml” method="post"> 
用 户 名 : <input type="text" name="uname" id="uname" 
placeholder=" 请 输入 用 户 名 " ><br> 
密 码 : cinput type="password" name="upass" id="upass" 
Placehotder=" 请 输入 密码 ”><br> 
[ET -TIPUE Wpe="text" nase="yz" 1d="yz" placeholder=" 









"images/7205.png" width="102" height="42" alt="" 


><br> 
<input type="checkbox" nase="checkbox” id="checkbox"> 记 住 
br> 

















路 
<input type="image" name="btn" id="btn” src= 
"images/7286.png"> 
</form 
/div> 
图 7-54 
使 用 autofocus 属性 可 用 于 所 有 类 型 的 input 元 素 ， 当 页 面 加 载 完 成 时 ， 可 自动 获取 焦点 。 每 个 


页 面 只 允许 出 现 一 个 有 autofocus 属性 的 input 元 素 。 如 果 为 多 个 input 元 素 设 置 了 autofocus 属性 ， 
则 相当 于 未 指定 该 行为 。 
autofocus 属性 的 使 用 方法 如 下 。 


<input type="text" id="key" name="key" autofocus> 


自动 获取 焦点 的 功能 也 要 防止 滥用 。 如 果 页 面 加 载 缓慢 ， 用 户 又 做 了 一 部 分 操作 ， 这 时 如 果 焦 点 
发 生 莫名 其 妙 的 转移 ， 用 户 体验 是 非常 不 好 的 。 目 前 ，autofocus 属性 已 获得 主流 浏览 器 的 支持 。 


IE 早期 版 本 就 已 经 支持 autocomplete 属性 。autocomplete 属性 可 应 用 于 form 元 素 和 输入 型 
的 input 元 素 ， 用 于 表单 的 自动 完成 。autocomplete 属性 会 把 输入 的 历史 记录 下 来 ， 当 再 次 输入 的 
时 候 ， 会 把 输入 的 历史 记录 显示 在 一 个 下 拉 列 表 中， 以 实现 自动 完成 输入 。 

autocomplete 属性 的 使 用 方法 如 下 。 


<input type="text" id="uname" name="uname" autocomplete="on"> 


autocomplete 属性 有 3 个 属性 值 ， 分 别 是 on、off 和 “”( 不 指定 值 )。 不 指定 值 时 ， 使 用 浏览 
器 的 默认 设置 。 由 于 不 同 的 浏览 器 默认 值 不 相同 ， 因 此 当 需 要 使 用 自动 完成 的 功能 时 ， 最 好 指定 该 属 
性 值 。 目 前 ，autofocus 属性 已 获得 主流 浏览 器 的 支持 。 


HTML 5 中 新 增 了 3 种 表单 元 素 ， 分 别 是 datalist 元 素 、keygen 元 素 和 output 元 素 ， 通 过 使 
用 这 些 元 素 ， 在 传统 的 基础 上 可 以 开发 出 更 加 精美 、 精 致 的 页 面 效 果 。 
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通过 组 合 使 用 list 属性 和 <datalist> 标签 ， 可 以 为 某 个 可 输入 的 input 元 素 定义 一 个 可 选 值 列 表 。 


使 用 <datalist> 标签 构造 选 值 列表 ; 设置 input 元 素 的 list 属性 值 为 <datalist> 标签 的 id 值 ， 即 可 
实现 二 者 的 绑 定 。 例 如 下 面 的 HTML 代码 。 


<input type="email" id="umail" name="umail" list="emaillist"> 
<datalist id="emaillist"> 
<option value="testl@test.com">testl@test.com</option> 


<option value="test2@test .com">test2@test .com</option> 
</datalist> 


在 以 上 的 HTML 代码 中 ， 使 用 <datalist> 标签 构造 了 一 个 可 选 值 列表 , id 为 emaillist; 在 


<input> 标签 中 通过 将 list 属性 值 设 置 为 emaillist， 绑 定 了 该 选 值 列 表 ， 运 行 结果 如 图 7-56 所 示 。 





/A 入 ~ 志 
( 必 的 全 cAUsersAdministrat P - 0| M7 
EE *[ | 











ltest1@test. com 
test2@test com [NS 














R100% ~ 








图 7-56 


<keygen> 标签 提供 了 一 种 安全 的 方式 来 验证 用 户 。 该 标签 有 密 钥 生成 的 功能 ， 当 提交 表单 时 ， 


会 分 别 生成 一 个 私人 密 钥 和 公共 密 钥 。 其 中 私人 密 钥 保存 在 客户 端 ， 公 共 密 钥 则 通过 网 络 传输 至 服务 
器 。 这 种 非 对 称 加 密 的 方式 ， 为 网 页 的 数据 安全 提供 了 更 大 的 保障 。 
<keygen> 标签 的 使 用 方法 如 下 。 


<form id="forml" name="forml" method="post"> 


<input type="text" id="uname" name="uname"><br> 
Encryption: 


<keygen name="security"><!-- 加 入 密 钥 安全 --> 
<br> 


<input type="submit" value=" 提交 "> 
</form> 


<keygen> 标签 提供 了 中 级 和 高 级 的 加 密 算法 ， 显 示 的 是 一 个 类 似 <select> 标签 的 下 拉 框 ， 可 
以 选择 加 密 等 级 。 目 前 ，<keygen> 标签 已 获得 主流 浏览 器 的 支持 。 
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<output> 标签 用 于 不 同类 型 的 输出 ， 如 用 于 计算 结果 或 脚本 的 输出 等 。<output> 标签 必须 从 属 
于 某 个 表单 ， 即 写 在 表单 的 内 部 。 
<output> 标签 的 使 用 方法 如 下 。 


<form oninput="x.value=volume .value"> 
<input type="range" id="volume" name="volume" value="50"> 
<output name="x"></output> 


</form> 


由 于 range 类 型 的 input 元 素 表 现 为 一 个 滑 块 ， 不 显示 数值 ， 因 此 这 时 使 用 <output> 标签 协助 
显示 其 值 。 目 前 ，<output> 标签 已 获得 主流 浏览 器 的 支持 。 


HTML 5 为 表单 验证 提供 了 极 大 的 方便 ， 在 验证 表单 的 方式 上 显得 更 加 灵活 。 表 单 验证 ， 首 先 基 
于 前 面 讲解 的 表单 类 型 的 规则 进行 验证 ;其 次 是 为 表单 元 素 提供 了 一 些 用 于 辅助 表单 验证 的 属性 ; 更 
重要 的 是 ，HTML 5 还 提供 了 专门 用 于 表单 验证 的 属性 、 方 法 和 事件 。 


HTML 5 提供 了 用 于 辅助 表单 验证 的 元 素 属性 。 利 用 这 些 属性 ， 可 以 为 后 续 的 表单 自动 验证 提供 
验证 依据 。 下 面 就 对 这 些 新 的 属性 进行 讲解 。 
了 》1. required 属性 

一 旦 在 某 个 表单 元 素 标签 中 添加 了 required 属性 ， 则 该 表单 元 素 的 值 不 能 为 空 ， 否 则 无 法 提交 
表单 。 以 文本 域 为 例 ， 只 需要 添加 required 属性 即 可 。 使 用 方法 如 下 。 


<input type="text" id="uname" name="uname" placeholder=" 请 输入 用 户 名 "required> 


如 果 该 文本 域 为 空 ， 则 无 法 提交 。required 属性 可 用 于 大 多 数 输入 或 选择 元 素 ， 隐 藏 的 元 素 
除外 。 
》2. pattern 属性 

pattern 属性 用 于 为 input 元 素 定义 一 个 验证 模式 。 该 属性 值 是 一 个 正则 表达 式 ， 提 交 时 ， 会 检 
查 输入 的 内 容 是 否 符合 给 定 的 格式 ， 如 果 输 入 内 容 不 符合 格式 ， 则 不 能 提交 。 使 用 方法 如 下 。 


<input type="text" id="code" name="code" value="" Placeholder="6 位 邮政 编码 " pattern= " [0-9] 
1519> 


使 用 pattern 属性 验证 表单 非常 灵活 。 例 如 ， 前 面 讲 到 的 email 类 型 的 input 元 素 ， 使 用 
pattern 属性 完全 可 以 实现 相同 的 验证 功能 。 
》3. min、max 和 step 属性 

min、max 和 step 属性 专门 用 于 指定 针对 数字 或 日 期 限制 。min 属性 表示 人 允许 的 最 小 值 ;max 
属性 表示 人 允许 的 最 大 值 ， step 属性 表示 合法 数据 的 间隔 步 长 。 使 用 方法 如 下 。 
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<input type="range" name="volume" id="volume" min="0" max="1" step="0.2" > 


在 该 HTML 代码 中 ， 最 小 值 是 0， 最 大 值 是 1， 步 长 为 0.2， 合 法 的 取 值 有 0、0.2、0.4、0.6、 
0.8 和 1。 
了 》4. novalidate 属性 

novalidate 属性 用 于 指定 表单 或 表单 内 的 元 素 在 提交 时 不 验证 。 如 果 在 <form> 标签 中 应 用 
novalidate 属性 ， 则 表单 中 的 所 有 元 素 在 提交 时 都 不 再 验证 。 使 用 方法 如 下 。 


<formid="forml" name="forml" method="post" novalidate="novalidate"> 
<input type="email" id="umail" name="umail"placeholder=" 请 输入 电子 邮箱 "> 
<input type="submit"value=" 提 交 "> 

</form> 


则 提交 该 表单 时 ， 不 会 对 表单 中 的 表单 元 素 进行 验证 。 


验证 网 页 表单 
最 终 文件 : 光盘 \ 最终 文件 \ 第 7 章 \7-7-1.html 。 视频 : 光盘 \ 视 频 \ 第 7 章 \7-7-1.mp4 


区 打开 页 面 “ 光 盘 \ 源 文件 \ 第 7 章 \7-7-1.html”， 可 以 看 到 页 面 效 果 ， 如 图 7-57 所 示 。 
转换 到 代码 视图 ， 可 以 看 到 页 面 中 表单 部 分 的 HTML 代码 ， 如 图 7-58 所 示 。 

















图 7-57 图 7-58 


节 轴 。” 在 “姓名 ”文字 后 的 <input> 标签 中 添加 required 属性 设置 ， 如 图 7-59 所 示 。 设 置 该 表 
单元 素 为 必 填 项 ,保存 页 面 ， 在 Chrome 浏览 器 中 预览 页 面 ， 没 有 在 文本 域 中 填写 内 容 直接 单 击 “ 提 
交 ” 按 钮 ， 将 显示 错误 提示 ， 如 图 7-60 所 示 。 





姓名 : <input type="text" name="uname" id="unamen 
placeholder=" 请 输入 姓名 " cLass="inputel" required> 
</p> 











图 7-59 
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王国 返回 网 页 HTML 代 码 中 ,在 “电话 "文字 后 的 <input> 标签 中 添加 pattern 属性 设置 ,如 图 7-61 
所 示 。 设 置 该 表单 元 素 中 填写 的 内 容 必 须 为 11 位 的 数字 ， 保 存 页 面 ， 在 Chrome 浏览 器 中 预览 
页 面 , 当 在 电话 表单 元 素 中 填写 的 并 非 11 位 数字 时 , 单 击 “提交 ”按钮 , 将 显示 错误 提示 , 如 图 7-62 
所 示 。 














<p> 

电话 : <input type="tel" name="utel" id="utel”" 
placeholder=" 请 输入 您 的 电话 " class="inpute1" pattern= 
"[0-9]{11}"> 
p> 











图 7-61 


表单 验证 的 属性 均 是 只 读 属性 ， 用 于 获取 表单 验证 的 信息 。 
》1. validity 属性 

该 属性 获取 表单 元 素 的 ValiditysState 对 象 ， 该 对 象 包含 8 个 方面 的 验证 结果 。ValiditysState 
对 象 会 持续 存在 ， 每 次 获取 validity 属性 时 ， 返 回 的 是 同一 个 ValiditysState 对 象 。 

以 一 个 id 属性 为 username 的 表单 元 素 为 例 ，validity 属性 的 使 用 方法 如 下 。 


var validitystate=document .getElementByid("username") .validity; 


关于 ValiditysState 对 象 将 在 下 一 节 讲 解 。 
》2. willValidate 属性 

该 属性 获取 一 个 布尔 值 ， 表 示 表 单元 素 是 否 需要 验证 。 如 果 表 单元 素 设置 了 required 属性 或 
pattern 属性 ， 则 willValidate 属性 的 值 为 true， 即 表单 的 验证 将 会 执行 。 

以 一 个 id 属性 为 username 的 表单 元 素 为 例 ，willValidate 属性 的 使 用 方法 如 下 。 





Var willValidate=document .getElementByid("username"). willValidate; 


》3. validationMessage 属性 

该 属性 获取 当前 表单 元 素 的 错误 提示 信息 。 一 般 设置 required 属性 的 表单 元 素 , 其 validationMessage 
属性 值 一 般 为 “请 填写 此 字段 ”。 

以 一 个 id 属性 为 username 的 表单 元 素 为 例 ，validationMessage 属性 的 使 用 方法 如 下 。 


var validationMessage=document. getElementByid("username") .validationMessage7 


性 为 只 读 属性 ， 不 能 直接 更 改 。 不 过 可 以 使 用 setCustomValidity() 方法 来 改变 该 值 。 
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ValidityState 对 象 是 通过 validity 属性 获取 的 , 该 对 象 有 8 个 属性 , 分 别针 对 8 个 方面 的 错误 验证 ， 
属性 值 均 为 布尔 值 。 
3》1. valueMissing 属性 

必 填 的 表单 元 素 的 值 为 空 。 

如 果 表单 元 素 设置 了 required 属性 ， 则 为 必 填 项 。 如 果 必 填 项 的 值 为 空 ， 就 无 法 通过 表单 验证 ， 
valueMissing 属性 会 返回 true， 否 则 返回 false。 
》2. typeMismatch 属性 

输入 的 值 与 type 类 型 不 匹配 。 

HTML 5 新 增 的 表单 类 型 如 email、number、url 等 ， 都 包含 一 个 原始 的 类 型 验证 。 如 果 用 户 输 
入 的 内 容 与 表单 类 型 不 符合 ， 则 typeMismatch 属性 将 返回 true， 否 则 返回 false。 
》3. patternMismatch 属性 

输入 值 与 pattern 属性 的 正则 不 匹配 。 

表单 元 素 可 通过 pattern 属性 设置 正则 表达 式 的 验证 模式 。 如 果 输 入 的 内 容 不 符合 验证 模式 的 规 
则 ， 则 patternMismatch 属性 将 返回 true， 否 则 返回 false。 
了 》4. tooLong 属性 

输入 的 内 容 超 过 了 表单 元 素 的 maxLength 属性 限定 的 字符 长 度 。 

表单 元 素 可 使 用 maxLength 属性 设置 输入 内 容 的 最 大 长 度 。 虽 然 在 输入 的 时 候 会 限制 表单 内 容 
的 长 度 ， 但 在 某 种 情况 下 ， 如 通过 程序 设置 ， 还 是 会 超出 最 大 长 度 限制 。 如 果 输 入 的 内 容 超 过 了 最 大 
长 度 限 制 ， 则 tooLong 属性 将 返回 true， 否 则 返回 false。 
》5. rangeUnderflow 属性 

输入 的 值 小 于 min 属性 的 值 。 

一 般 用 于 填写 数值 的 表单 元 素 ， 都 可 能 会 使 用 min 属性 设置 数值 范围 的 最 小 值 。 如 果 输 入 的 数 
值 小 于 最 小 值 ， 则 rangeUnderflow 属性 返回 true， 否 则 返回 false。 
》6. rangeOverflow 属性 

输入 的 值 大 于 max 属性 的 值 。 

一 般 用 于 填写 数值 的 表单 元 素 ， 也 可 能 会 使 用 max 属性 设置 数值 范围 二 代 最 大 值 。 如 果 输 入 的 
数值 大 于 最 大 值 ， 则 rangeOverflow 属性 返回 true， 否 则 返回 false。 
了 》7. stepMismatch 属性 

输入 的 值 不 符合 step 属性 所 推算 出 的 规则 。 

用 于 填写 数值 的 表单 元 素 ， 可 能 需要 同时 设置 min、max 和 step 属性 ， 这 就 限制 了 输入 额 值 必 
须 是 最 小 值 与 step 属性 值 的 倍数 之 和 。 如 范围 为 0 ~ 10，step 属性 值 为 2， 因 为 合法 值 为 该 范围 
内 的 偶数 ， 其 他 数值 均 无 法 通过 验证 。 如 果 输 入 值 不 符合 要 求 ， 则 stepMismatch 属 返回 true， 否 
则 返回 false。 
3》8. customError 属性 

使 用 自 定义 的 验证 错误 提示 信息 。 

有 时 候 ， 不 太 适 合 使 用 浏览 器 内 置 的 验证 错误 提示 信息 ， 需 要 自己 定义 。 当 输入 值 不 符合 语义 规 
则 时 ， 会 提示 自 定义 的 错误 提示 信息 。 

通常 使 用 setCustomValidity() 方法 自 定义 错误 提示 信息 : setCustomValidity(message) 会 把 
错误 提示 信息 自 定义 为 message， 此 时 customError 数值 值 为 rue; setCustomValidity("") 会 清 
除 自 定义 的 错误 信息 ， 此 时 customError 属性 信 为 false。 
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HTML 5 为 用 户 提供 了 两 个 用 于 表单 验证 的 方法 。 
》1. checkValidity() 方法 

显示 验证 方法 。 每 个 表单 元 素 都 可 以 调用 checkValidity() 方法 (包括 form), 它 返 回 一 个 布尔 值 ， 
表示 是 否 通过 验证 。 在 默认 情况 下 ， 表 单 的 验证 发 生 在 表单 提交 时 ， 如 果 使 用 checkValidity() 方法 ， 
可 以 在 需要 的 任何 地 方 验证 表单 。 一 旦 表单 没有 通过 验证 ， 则 会 触发 invalid 事件 。 

如 下 面 的 HTML 代码 ， 是 使 用 checkValidity() 方法 显 式 验证 表单 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<script type="text/javascript"> 

function CheckForm(frm) { 
if(frm.umail.checkValidity()) { 

alert (" 电子 邮件 格式 正确 | "); 

}elsef{ 


alert (" 电子 邮件 格式 错误 | ") ; 


} 
</script> 
</head> 
<body> 
<form id="forml" name="forml" method="post"> 
<input type="email" id="umail" name="umail" value="xxxxx@163.com" > 
<br> 
<input type="submit" value=" 提交 onClick="return CheckForm(this.form)"> 
</form> 
</body> 
</html> 


单 击 “ 提 交 ” 按 钮 时 ， 会 先 调用 CheckForm() 函数 进行 验证 ， 再 使 用 浏览 器 内 置 的 验证 功能 进 
行 验证 。CheckForm() 函数 包含 了 checkValidity() 方法 的 显 式 验证 。 在 使 用 checkValidity() 进行 
显 式 的 验证 时 ， 还 会 触发 所 有 的 结果 事件 和 Ul 触发 器 ， 就 好 像 表 单 提交 了 一 样 。 

》2. setCcustomValidity() 方法 

自 定义 错误 提示 信息 的 方法 。 当 默认 的 提示 错误 满足 不 了 需求 时 ， 可 以 通过 该 方法 自 定义 错误 提 
示 。 当 通过 该 方法 自 定义 错误 提示 信息 时 ， 元 素 的 validationMessage 属性 值 会 更 改 为 定义 的 错误 
提示 信息 ， 同 时 ValiditysState 对 象 的 customError 属性 值 变 成 true。 

如 下 面 的 HTML 代码 ， 是 使 用 setCustomValidity() 方法 自 定义 错误 提示 信息 。 
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在 提交 表单 时 , 如 果 姓 名 为 空 , 则 自 定义 一 个 提示 信息 ; 如 果 姓 名 不 为 空 , 则 取消 自 定义 错误 信息 。 


invalid 事件 是 HTML 5 为 用 户 提供 的 表单 验证 事件 。 表 单元 素 为 通过 验证 时 触发 。 无 论 是 提 
交 表 单 还 是 直接 调用 checkValidity 方法 ， 只 要 有 表单 元 素 没有 通过 验证 ， 就 会 触发 invalid 事件 。 
invalid 事件 本 身 不 处 理 任何 事情 ， 我 们 可 以 监听 该 事件 ， 自 定义 事件 处 理 。 

如 下 面 的 HTML 代码 ， 监 听 invalid 事件 。 





// 获取 当前 被 验证 的 对 象 
Var validity=evt.srcElement .validity; 
// 检测 Validitystate 对 象 的 valueMissing 属性 
if(validity.valueMissing) { 
alert (" 姓名 是 必 填 项 ， 不 能 为 空 ") 
} 
// 如 果 不 希 望 看 到 浏览 器 默认 的 错误 提示 方式 ， 可 以 使 用 下 面 的 方式 取消 
evt.preventDefault (); 
window.onload=function() { 
Var uname=document .getElementByid("uname"); 
// 注册 监听 invalid 事件 
uname.addEventListener ("invalid",invalidHandler, false); 
</script> 
</head> 
<body> 


<formid="forml" name="forml" method="post"> 





<input type="text" id="uname" name="uname" placeholder=" 请 输入 姓名 " 
required> 

<br> 

<input type="submit" value=" 提交 "> 

</form> 

</body> 

</html> 





页 面 初始 化 时 ， 为 姓名 输入 框 添加 了 一 个 监听 的 invalid 事件 。 当 表单 验证 没有 通过 时 ， 会 触发 
invalid 事件 ，invalid 事件 会 调用 注册 到 事件 中 的 函数 invalidHandler()。 这 样 就 可 以 在 自 定义 的 函 
数 invalidHandler() 中 做 任何 事情 了 。 

一 般 情况 下 ， 在 invalid 事件 处 理 完成 后 ， 还 是 会 触发 浏览 器 默认 的 错误 提示 。 必 要 的 时 候 ， 可 
以 屏蔽 浏览 器 后 续 的 错误 提示 ， 可 以 使 用 事件 的 preventDefault() 方法 ， 阻 止 浏览 器 的 默认 行为 ， 
并 自行 处 理 错误 提示 信息 。 

通过 使 用 invalid 事件 使 得 表单 开发 更 加 灵活 。 如 果 需 要 取消 验证 ， 可 以 使 用 前 面 介绍 的 
novalidate 属性 。 


本 章 主 要 讲解 了 HTML 5 的 表单 技术 ， 重 点 讲解 了 新 增 的 表单 类 型 、 表 单 属性 和 元 素 以 及 表单 
验证 方法 ， 其 中 分 别 对 表单 验证 的 属性 、 方 法 和 事件 进行 了 讲解 ， 对 涉及 的 ValiditysState 对 象 也 做 
了 逐一 的 剖析 。 本 章 的 难点 在 于 表单 验证 方式 的 思维 转变 ， 需 要 对 表单 验证 的 整个 过 程 有 非常 充分 的 
理解 。 希 望 读者 在 学 习 了 相关 知识 后 ， 能 够 掌握 并 理解 。 
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第 8 章 HTML 5 本 地 存储 


随 着 Web 应 用 的 发 展 ， 需 要 在 用 户 本 地 浏览 器 上 存储 更 多 
的 应 用 数据 ， 传 统 的 cookie 存储 的 方案 已 经 不 能 满足 发 展 的 需 
求 ， 而 使 用 服务 器 端 存储 的 方案 则 是 一 种 无 奈 的 选择 。HTML 
5 的 Web Storage API 是 一 个 理想 的 解决 方案 。 如 果 是 存储 复 

杂 的 数据 ， 则 可 以 借助 Web SQL Database API 来 实现 ， 可 
以 有 SQL 语句 完成 复杂 数据 的 存储 与 查询 。 本 章 将 向 读者 介 
绍 HTML 5 中 的 本 地 存储 功能 。 


于 医 天 全 气 信和 建设 人 本 天 远 




















本 章 知识 点 NA 
MY 了 解 Web Storage 的 优势 ah 
w 理解 localStorage 与 session 
Storage 的 区 别 
YY 掌握 设置 和 获取 Storage 数 
据 的 方法 
MW 掌握 Storage API 的 属性 和 
方法 
了 解 本 地 数据 库 Web SQL 





使 用 HTML 5 的 Web Storage 功能 ， 可 以 在 客户 端 存储 更 多 的 数据 ， 而 且 可 以 实现 数据 在 多 











个 页 面 中 共享 甚至 是 同步 。 



































cookie 可 用 于 在 程序 间 传 递 少 量 的 数据 ， 对 于 Web 应 用 来 说 ， 它 是 一 个 在 服务 器 和 客户 端 之 














间 来 回 传送 文本 值 的 内 置 机 制 ， 服 务 器 可 以 根据 cookie 来 追踪 用 户 在 不 同 页 面 的 访问 信息 。 正 因 其 























卓越 A 在 目前 的 Web 应 用 中 ，cookie 得 到 了 最 为 广泛 的 应 








管 如 此 ，cookie 仍然 有 很 多 不 尽 人 意 的 地 方 ， 主要 表现 在 以 下 方面 。 


。 A 

















cookie 的 大 小 被 限制 在 4KB。 在 Web 的 富 应 用 环境 中 ， 不 能 








e 带宽 的 限制 


















































读 受 文件 或 邮件 那样 的 大 数据 。 





只 要 有 涉及 cookie 的 请 求 ，cookie 数据 都 会 在 服务 器 和 浏览 器 间 来 回 传送 。 这 样 无 论 访问 哪个 





，Cookie 数据 都 会 消耗 网 络 的 带宽 。 
e 安全 风险 


汪 
























































有 安全 风险 的 。 











cookie 会 频繁 地 在 网 络 中 传送 ， 而 且 数 据 在 网 络 上 是 可 见 的 ， 因 此 在 不 加 密 的 情况 下 ， 是 


e 操作 复杂 
在 客户 端的 浏览 器 中 ， 使 用 JavaScript 操作 cookie 数据 是 比较 复杂 的 。 但 是 服务 器 可 以 很 方 
便 地 操作 cookie 数据 。 


Web Storage 可 以 在 客户 端 保存 大 量 的 数据 ， 而 且 通 过 其 提供 的 接口 ， 访 问 数据 也 非常 方便 。 
然而 ，Web Storage 的 诞生 并 不 是 为 了 替代 cookie， 相 反 ， 是 为 了 弥补 cookie 在 本 地 存储 中 表现 
的 不 足 。 

Web Storage 本 地 存储 的 优势 主要 表现 在 以 下 几 个 方面 。 

e 存储 容量 

提供 更 大 的 存储 容量 。 在 Firefox、Chrome、Safari 和 Opera 中 ， 每 个 网 域 为 5MB; 在 IE8 
及 以 上 则 每 个 网 域 为 10MB。 

。 零 带宽 

Web Storage 中 的 数据 仅仅 是 存储 在 本 地 ， 不 会 与 服务 器 发 生 任何 交互 行为 ， 所 以 不 存在 网 络 
带宽 的 占用 问题 。 

。 编程 接口 

Web Storage 提供 了 一 套 丰富 的 编程 接口 ， 使 得 数据 操作 更 加 方便 。 

。 独立 的 存储 空间 

每 个 域 (包括 子 域 ) 都 有 独立 的 存储 空间 , 各 个 存储 空间 是 完全 独立 的 , 因此 不 会 造成 数据 的 混乱 。 

由 此 可 见 ，Web Storage 并 不 能 完全 替代 cookie，cookie 能 做 的 事情 ，Web Storage 并 不 一 
定 能 做 到 ， 如 服务 器 可 以 访问 cookie 数据 ， 但 是 不 能 访问 Web Storage 数据 。 所 以 Web Storage 
和 cookie 是 相互 补充 的 ， 会 在 各 自 不 同 的 方面 发 挥 作用 。 

随 着 移动 互联 网 的 发 展 ， 浏 览 器 端的 富 应 用 是 一 种 必然 的 趋势 ， 而 Web Storage 作为 完全 的 浏 
览 器 客户 端的 本 地 存储 ， 将 发 挥 越 来 越 重要 的 作用 。 


Web Storage 本 地 存储 包括 sessionStorage( 会 话 存储 ) 和 localStorage( 本 地 存储 )。 熟 悉 
Web 编程 的 人 员 第 一 次 接触 Web Storage 时 , 会 很 自然 地 与 session 和 cookie 去 对 应 。 不同 的 是 ， 
cookie 和 session 完全 是 服务 器 端 可 以 操作 的 数据 ， 但 是 sessionStorage 和 localStorage 则 完 
全 是 浏览 器 客户 端 操作 的 数据 。 

sessionStorage 和 IlocalStorage 完全 继承 同一 个 Storage API， 所 以 sessionStorage 和 
localStorage 的 编程 接口 是 一 样 的 。sessionStorage 和 localStorage 的 主要 区 别 在 于 数据 存在 的 
时 间 范 围 和 页 面 范围 。 

sessionStorage 和 localStorage 的 区 别 介绍 如 表 8-1 所 示 。 


表 8-1 sessionStorage 和 localStorage 的 区 别 


sessionStorage 
的 或 款 竺 关闭 时 妆 反 的 生 命 局 姑 比 容 吕 或 浏 几 器 的 生命 周 央 长 
[ 琴 晤 员 在 构建 如 们 的 痪 或 标签 页 南 可 各 站 沙皇 可 被 同 源 的 每 个 窗口 或 标签 页 共 训 
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了 解 Web Storage 的 相关 知识 后 ， 接 下 来 将 向 读者 介绍 如 何 设置 和 获取 Storage 数据 、Web 
Storage 的 属性 、 方 法 和 事件 等 相关 知识 。 





在 HTML 5 的 各 项 特性 中 ，Web Storage 的 浏览 器 支持 度 是 比较 好 的 。 目 前 ， 所 有 的 主流 浏览 
器 都 在 一 定 程度 上 支持 Web Storage。 因 而 ，Web Storage 成 为 Web 应 用 中 最 安全 的 API 之 一 。 
尽管 如 此 ， 还 是 需要 检查 浏览 器 是 否 支 持 Web Storage， 因 为 在 某 种 情况 可 能 会 导致 浏览 器 不 能 使 
用 Web Storage 的 功能 。 


检查 浏览 器 是 否 支持 Web Storage 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 8 章 \8-2-1.html ” 视频: 光盘 \ 视 频 \ 第 8 章 \8-2-1.mp4 


[GE 执行 “文件 > 新建 "命令 , 新 建 一 个 HTML 5 文档 , 将 其 保存 为 “光盘 \ 源 文件 \ 第 8 章 \8-2-1. 
html”， 如 图 8-1 所 示 。 转 换 到 该 网 页 的 HTML 代码 中 ， 输 入 页 面 标题 和 正文 内 容 ， 如 图 8-2 所 示 。 





<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<tittLe> 检 查 浏览 器 是 否 支持 Web Storage</title> 
</head> 





<body> 

检查 浏览 器 是 否 支 持 web storage 
</body> 

|</html> 














ra 








图 8-1 图 8-2 
区 za 在 <head> 与 </head> 标签 之 间 输 入 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 
function CheckStorageSupport (){ 
if (window.sessionSstorage){ 
console.1log(" 浏览 器 支持 sessionstorage 特性 !"); 
}elsef{ 
console .1og (" 浏览 器 不 支持 sessionstorage 特性 !"); 
} 
if(window.localstorage){ 
console.1og (" 浏览 器 支持 localstorage 特性 !") ; 
jelsef 
console.1o0g (" 浏览 器 不 支持 localstorage 特性 !") ; 
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window.addEventListener ("load",CheckStorageSupport, false); 


</script> 


使 用 JavaScript 代码 来 检测 浏览 器 是 否 支 持 Web Storage 功能 ， 在 
JavaScript 脚本 代码 中 使 用 console.log() 方法 ， 将 JavaScript 代码 的 调试 内 容 输 
出 到 浏览 器 的 控制 台 。 





葬 畏 ”保存 页 面 , 在 Chrome 浏览 器 中 预览 页 面 ， 按 快捷 键 F12， 打 开 浏览 器 控制 台 ， 可 以 看 到 
JavaScript 脚本 调试 的 结果 ， 如 图 8-3 所 示 。 


[ rename x NW 
C 世代 VNDVyBOOK/2015/HTML5+CSS3+jQuery/ 二 文件 /第 8 埋 /8-2-Lhtml 
柱 查 浏览 器 是 否 支 持 Web Storase 


局 IE 





sessionStorage 和 localStorage 作为 window 的 属性 ， 完 全 继承 Storage API， 它 们 提供 的 
操作 数据 的 方法 完全 相同 。 下 面 以 sessionStorage 属性 为 例 进行 讲解 。 
》1. 保存 数据 到 sessionStorage 

sessionStorage 保存 数据 的 基本 语法 如 下 。 


window.sessionstorage.setItem("key", "value"); 


key 为 字符 串 表示 的 “ 键 ”，value 为 字符 串 表示 的 “ 值 ”，setltem() 表示 保存 数据 的 方法 。 
了 》2. 从 sessionStorage 中 获取 数据 

如 果 知道 保存 到 sessionStorage 中 的 “ 键 ”， 就 可 以 取 到 对 应 的 “ 值 ”。sessionStorage 获 
取 数 据 的 基本 语法 如 下 。 


value =window.sessionStorage .getIem("key") 7 


key 和 value 分 别 表示 “ 键 ” 和 “ 值 ”， 与 保存 数据 的 “ 键 ” 和 “ 值 ”对 应 。getltem() 为 获取 
数据 的 方法 。 
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》 3. 设置 和 获取 数据 的 其 他 写法 

对 于 访问 Storage 对 象 还 有 更 简单 的 方法 ， 根 据 “ 键 ”和 “ 值 ” 的 配对 关系 ， 直 接 在 
sessionStorage 对 象 上 设置 和 获取 数据 ， 可 完全 避免 调用 setltem() 和 getltem() 方法 。 

保存 数据 的 方法 也 可 写 为 如 下 的 形式 。 


window.sessionstorage.key="value"; 
或 
window.sessionStorage ["key"] ="value"; 


获取 数据 的 方法 更 加 直接 ， 可 写 为 如 下 的 形式 。 


value=window.sessionStorage .key7 


或 
value =window.sessionstorage["key"]; 


这 种 灵活 的 使 用 方法 ， 给 编程 带 来 极 大 的 灵活 性 。 当 然 ， 对 于 localStorage 来 说 ， 同 样 具 有 上 
述 设置 数据 和 获取 数据 的 方法 。 


使 用 sessionStorage 和 localStorage 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 8 章 \8-2-2.html 视频: 光盘 \ 视 频 \ 第 8 章 \8-2-2.mp4 


[GE 新 建 HTML 5 文档， 将 其 保存 为 “光盘 \ 源 文件 \ 第 8 章 \8-2-2.html”。 
区 zB 在 <head> 与 </head> 标签 之 间 输入 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 

function Test(){ 
// 在 localstorage 存储 localKey 的 值 为 "localValue" 
window.localStorage.setItem("localKey", "localValue"); 
// 获取 存储 在 localstorage 中 的 1ocalKey 的 值 ， 并 输出 到 控制 台 
console.log (window.localStorage.getItem("localKey")); 
// 在 sessionstorage 存储 sessionKey 的 值 为 "sessionvalue" 
window.sessionSstorage.setItem("sessionKey", "sessionValue"); 
// 获取 存储 在 sessionstorage 中 的 sessionKey 的 值 ， 并 输出 到 控制 台 
console.log (window.sessionstorage.getItem("sessionKey")); 

} 

window.addEventListener ("load",Test, false); 


</script> 


[一 保 存 页 面 ， 在 Chrome 浏览 器 中 预览 页 面 ， 按 快捷 键 F12， 打 开 浏 览 器 控制 台 ， 可 以 看 到 
JavaScript 脚 本 调试 的 结果 , 如 图 8-4 所 示 。 关 于 在 localStorage 和 sessionStorage 中 存储 和 数据 ， 
可 以 借助 浏览 器 本 身 的 功能 进行 查看 ， 如 在 Chrome 浏览 器 中 ， 可 以 在 Resources 面板 中 查看 存储 
的 数据 ， 如 图 8-5 所 示 。 
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启用 srsstnstorsse 和 和 localStorsar 








在 上 节 中 学 习 了 如 何 使 用 setltem() 方法 存储 数据 ， 使 用 getltem() 方法 获取 数据 。 这 些 方法 都 
来 源 于 它们 所 继承 的 Storage API 提供 的 方法 。 
如 下 代码 中 显示 了 接口 中 所 有 的 属性 和 方法 。 


interface Storage { 
readonly attribute unsigned long length; 
DOMString? key (unsigned long index); 
getter DOMString getItem(DOMString key); 
setter creator void setItem(DOMString key,DOMString value); 
deleter void removeItem(DOMString key); 
void clear(); 


]7 


接口 中 的 属性 和 方法 说 明 如 表 8-2 所 示 。 


表 8-2 ”接口 中 的 属性 和 方法 说 明 


说 明 


表示 当前 Storage 对 象 中 存储 的 键 / 值 对 的 数量 。Storage 对 象 是 同 源 的 ， 
length 属性 只 能 反映 同 源 的 键 / 值 对 数量 
获取 指定 位 置 的 键 。 一 般 用 于 遍历 某 个 Storage 对 象 中 所 有 的 键 ， 然 后 再 通过 


键 来 取 相应 的 值 
getiem(Key) 方法 根据 键 返 回 相应 的 数据 。 如 果 该 键 值 存 在 ， 则 返回 值 ， 否 则 返回 null 
setitem(key, Value) 方法 将 数据 存 入 指定 键 对 应 的 位 置 。 如 果 对 应 的 键 值 已 经 存在 ， 则 更 新 它 

从 存储 对 象 中 移 除 指定 的 键 / 值 对 。 如 果 该 键 / 值 对 存在 ， 则 移 除 它 ， 否 则 不 执 
行 任何 操作 

cea 清空 Storage 对 象 中 所 有 的 数据 。 如 果 Storage 对 象 是 空 的 ， 则 不 执行 任何 操作 


在 使 用 sessionStorage 和 localStorage 时 ， 以 上 的 属性 和 方法 都 可 以 使 用 ， 但 需要 注意 其 影 
响 的 范围 。 











使 用 Storage 对 象 保存 页 面 内 容 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 8 章 \8-2-3.html 。 视频 : 光盘 \ 视 频 \ 第 8 章 \8-2-3.mp4 
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[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 8 章 \8-2-3.html”, 页 面 效果 如 图 8-6 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 页 面 的 HTML 代码 ， 如 图 8-7 所 示 。 


IE SIE 得 FeiEE 名 















in"> <span class=nfont6l"> 添 加 用 户 信息 <1span> 
前 fd-"forml” Nape="fornl" method:"post"> 


jinput type="text" nane-"unane" 1d-"unane" class="inputel"> 





年 

inpur Type="nunber" rane="age" f="age" riass=rinpurelny 
<br> 

Enatl: 

<input type=-Menail" name="enail® 1d-"enail" class="inputel"> 
<br> 

电话 : 


input type="tel" nane="phone" 1d="phonen class="inputel", 
hry 


nput type-nbuttonm value-" 保 存 " class-nbtn"， 
type="button" value=" 显 示 " class="btn"> 











"formdaran></div 








图 8-6 图 8-7 
贡 z 在 页 面 的 <head> 与 </head> 标签 之 间 编 写 JavaScript 脚本 代码 。 





<script type="text/javascript"> 
// 保存 数据 到 sessionstorage 
function SaveStorage (frm){ 
Var storage =window.sessionSstorage; 
storage.setItem("uname",frm.uname.value); 
storage.setItem("age",frm.age.value); 
storage.setItem("email",frm.email.value); 
storage.setItem("phone",frm.phone.value); 
} 
// 遍历 并 显示 sessionstorage 中 的 数据 
function Show(){ 
Var storage =window.sessionSstorage; 
Var result=""; 
for (var i=0;i<storage.length;i++){ 
var key = storage.key (i); /* 获取 键 key */ 
var value = storage.getItem(key); /* 通过 键 key 获取 值 value */ 
result +=key +":"+value+"; "7 


} 

/* 在 指定 的 地 方 显示 获取 的 存储 内 容 */ 

document .getElementByid("formdata") .innerHTML = result; 
于 
</script> 


在 编写 的 JavaScript 脚本 代码 中 ， 有 两 个 脚本 处 理 函 数 SaveStorage() 和 
提示 病 “Show()， 分 别 用 于 保存 数据 和 显示 数据 。 其 中 保存 数据 仅 使 用 了 setltem() 方法 ， 
显示 数据 则 根据 索引 遍历 “ 键 ”， 并 根据 “ 键 ” 获 取 对 应 的 “ 值 ”， 使 用 了 key() 方 
法 和 getltem() 方法 。 
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[E 邓 较 为 表单 中 相应 的 按钮 表单 元 素 添 加 脚本 代码 ， 调 用 JavaScript 函数 ， 如 图 8-8 所 示 。 


<br> 
<input type="button" value=" 保 存 " class="btn" onClick="SaveStorage(this.form)"> 
<input type="button" value=" 显 示 " class="btn" onC ick="Show()"> 

</form> 














图 8-8 


区 保存 页 面 , 在 Chrome 浏览 器 中 预览 页 面 ， 在 各 表单 元 素 中 填写 相应 的 值 , 单 击 “ 保 存 ” 按 钮 ， 
即 可 保存 本 地 数据 , 如 图 8-9 所 示 。 单 击 “ 显 示 ” 按 钮 , 即 可 显示 刚刚 保存 的 本 地 数据 , 如 图 8-10 所 示 。 
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图 8-9 图 8-10 





虽然 使 用 Web Storage 可 以 保持 任意 的 “ 键 / 值 ”对 数据 ， 但 是 一 些 浏览 器 把 数据 限定 为 字符 
串 类 型 ， 而 且 对 于 一 些 复杂 结构 的 数据 ， 管 理 起 来 比较 混乱 。 例 如 8.2.3 节 的 案例 ， 如 果 要 保存 多 个 
人 的 数据 ， 就 会 变 得 不 易于 管理 。 

不 过 对 于 复杂 结构 的 数据 ， 可 以 使 用 现代 浏览 器 都 支持 的 JSON 对 象 来 处 理 ， 这 也 为 开发 人 员 
提供 了 一 种 可 行 的 解决 方案 。 
了 》1. 序列 化 JSON 格式 的 数据 

由 于 Storage 是 以 字符 串 保 存 数据 的 ， 因 此 在 保存 JSON 格式 的 数据 之 前 ， 需 要 把 JSON 格式 
的 数据 转换 为 字符 串 ， 称 为 序列 化 。 可 以 使 用 JSON.stringify() 序列 化 JSON 格式 的 数据 为 字符 串 
数据 。 使 用 方法 如 下 。 


var StringData=JSON.stringify(jsonobject) 7 


以 上 代码 把 JSON 格式 的 数据 对 象 SonObject 序列 化 为 字符 串 数据 stringData 。 


》 2. 把 数据 反 序列 化 为 JSON 格式 

如 果 把 存储 的 Storage 中 的 数据 以 JSON 格式 对 象 的 方式 去 访问 ， 需 要 把 字符 串 数据 转换 为 
JSON 格式 的 数据 ， 称 为 反 序 列 化 。 可 以 使 用 JSON.parse() 反 序列 化 字符 串 数据 为 JSON 格式 的 
数据 。 使 用 方法 如 下 。 


var jsonObject =JSON.parse (StringData) 7 
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以 上 代码 把 字符 串 数据 stringData 反 序 列 化 为 JSON 格式 的 数据 对 象 jsonObject。 


反 序 列 化 字符 串 为 JSON 格式 的 数据 ， 也 可 以 使 用 eval() 函数 ， 但 eval() 函数 
是 把 任意 的 字符 串 转换 为 脚本 ， 有 很 大 的 安全 隐患 ， 但 是 JSON.parse() 只 反 序 列 
化 JSON 格式 的 字符 串 数 据 ， 如 果 字 符 串 数 据 不 符合 JSON 数据 格式 ， 则 会 产生 错 
误 ， 同 时 也 减少 了 安全 隐患 ， 但 是 执行 效率 方面 eval() 函数 要 快 很 多 。 


使 用 Storage 对 象 存储 JOSN 数据 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 8 章 \8-2-4.html 视频: 光盘 \ 视 频 \ 第 8 章 \8-2-4.mp4 


UI 执行 文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 8 章 \8-2-4.html”, 页 面 效 果 如 图 8-11 
所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 页 面 的 HTML 代码 ， 如 图 8-12 所 示 。 




















图 8-11 图 8-12 
EEE 王 在 页 面 的 <head> 与 </head> 标签 之 间 编 写 JavaScript 脚本 代码 。 


<script type="text/javascript"> 

var flag=1; 

window.sessionstorage.clear (); 
// 保存 数据 到 sessionstorage 

function SaveStorage (frm) { 
// 使 用 表单 数据 建立 j son 对 象 
Var jsonObject =new Object () 7 
jsonobject .uname = frm.uname.value; 
jsonobject.age =frm.age.value7 
jsonobject .email = frm.email.value7 
jsonobject.phone = frm.phone.value; 
// 序列 化 json 对 象 为 字符 串 数 据 
var stringData = JSON.stringify(jsonObject); 
Var storage =window.sessionSstorage; 
storage.setItem("key"+flag, stringData); 
flag++? 
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// 遍历 并 显示 sessionstorage 中 的 数据 
function Show(){ 
Var storage =window.sessionstorage; 
Var result=""; 
for (var i=0;i<storage.length;i++){ 
var key = storage.key (i); /* 获取 键 key */ 
var stringData = storage.getItem(key); /* 通过 键 key 获取 值 value */ 
Var jsonObject = JSON-Parse (stringData); 
result += 姓名 : "+]Jjsonobject.-uname 二 "5 年 龄 : “+]jJjsonobject.age+"; 邮件 ; 
"+jsonObject.email+"; 电话 : "+ jsonobject. phone +"; <br>"; 
1 
/* 在 指定 的 地 方 显示 获取 的 存储 内 容 */ 
document .getElementByid("formdata") .innerHTML = result; 
} 
</script> 


在 编写 的 JavaScript 脚本 代码 中 ， 保 存 数 据 时 ， 先 使 用 表单 内 容 建立 一 个 
JSON 对 象 ， 然后 序列 化 JSON 对 象 为 字符 串 数据 ， 保 存 至 Storage。 显 示 数 据 时 ， 
会 遍历 所 有 存储 的 数据 ， 并 把 读 取 的 数据 反 序 列 化 一 个 JSON 对 象 ， 然 后 再 对 该 对 
象 进行 操作 。 





[天 ”保存 页 面 ， 在 Chrome 浏览 器 中 预览 页 面 ， 添 加 多 条 数据 并 进行 保存 ， 即 可 保存 本 地 数据 ， 
如 图 8-13 所 示 。 单 击 “ 显 示 ” 按 钮 ， 即 可 显示 刚刚 保存 的 多 条 本 地 数据 ， 如 图 8-14 所 示 。 





SeCSSj-jQueny 这 /及 ml = 外 < 5+C6S3+jOuen/ 于/ 














图 8-13 图 8-14 





有 时 候 ， 会 存在 多 个 网 页 或 标签 页 同时 访问 存储 数据 的 情况 。 为 保证 修改 的 数据 能 够 及 时 反馈 到 
另 一 个 页 面 ，HTML 5 的 Web Storage 内 建立 一 套 事件 通知 机 制 ， 会 在 数据 更 新 时 触发 。 无 论 监 
的 窗口 是 否 存储 过 该 数据 ， 只 要 与 执行 存储 的 窗口 是 同 源 的 ， 都 会 触发 Web Storage 事件 。 
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例如 下 面 的 代码 ， 添 加 监听 事件 后 ， 即 可 接收 同 源 窗口 的 Storage 事件 。 


window.addEventListener ("storage",EventHandle, true); 


Storage 是 添加 的 监听 事件 ， 只 要 是 同 源 的 Storage 事件 发 生 ( 包括 sessionStorage 和 
localStorage)， 都 能 够 因数 据 更 新 而 触发 事件 。 
Storage 事件 的 接口 如 下 所 示 。 


interface StorageEvent : Event { 
readonly attribute DOMString key; 
readonly attribute DOMString? oldValue; 
readonly attribute DOMString? newValue; 
readonly attribute DOMString url; 
readonly attribute Storage? storageArea; 
Es 


StorageEvent 对 象 在 事件 触发 时 ， 会 传递 给 事件 处 理 程序 ， 它 包含 了 存储 变化 有 关 的 所 有 必要 
的 信息 。 
Storage 事件 的 相关 属性 的 说 明 如 表 8-3 所 示 。 


表 8-3 Storage 事件 的 相关 属性 说 明 


属性 | 说 明 

KE 包含 了 存储 中 被 更 新 或 出 除 的 键 

Ga 时 包含 了 更 新 前 键 对 应 的 数据 。 如 果 是 新 添加 的 数据 ， 则 oldValue 属性 值 为 null 
Wa 包含 了 更 新 后 的 数据 。 如 果 是 被 删除 的 数据 ， 则 newValue 属性 值 为 null 


[UL 指向 Storage 事 件 的 发 生源 


指向 值 发 生变 化 的 localStorage 或 sessionStorage。 这 样 ， 处 理 程序 可 以 方 
便 地 查询 到 Storage 中 的 当前 值 ， 或 者 基于 其 他 的 Storage 执行 其 他 操作 


为 了 进一步 加 强 客户 端的 存储 能 力 ，HTML 5 引入 了 本 地 数据 库 的 概念 。 但 HTML 5 的 数据 库 
API 的 具体 细节 仍 在 完善 ， 其 中 Web SQL Database 就 是 数据 库 方案 之 一 。 实 际 上 ，Web SQL 
Database 并 不 包含 在 HTML 5 规范 之 中 ， 它 是 一 个 独立 的 规范 ， 引 入 了 使 用 SQL 操作 客户 端 数据 
库 的 API。 最 新 版 本 的 Chrome、Safari 和 Opera 浏览 器 都 已 经 实现 了 它 。 


Web SQL Database 的 规范 使 用 的 是 SQLite 数据 库 ， 它 允许 应 用 程序 通过 一 个 异步 的 
JavaScript 接 口 访问 数据 库 。 虽 然 Web SQL 不 属于 HTML 5 规范 , 而且 HTML 5 最 终 也 不 会 选择 它 ， 
但 是 对 于 移动 领域 是 非常 有 用 的 ， 因 为 在 任何 情况 下 ，SQL API 在 数据 库 中 的 数据 处 理 能 力 都 是 无 
法 比拟 的 。 

SQLite 是 一 款 轻型 的 数据 库 ， 遵 循 ACid 的 关系 型 数据 库 管 理 系统 ， 它 的 优势 是 嵌入 式 的 ， 且 
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占用 资源 非常 低 ， 只 需要 几 百 KB 的 内 存 就 可 以 了 。 在 跨 平 台 方 面 ， 它 能 够 支持 Windows、Linux 
等 主流 操作 系统 ， 同 时 能 够 与 很 多 程序 语言 如 C#、PHP、Java、JavaScript 等 结合 。 它 包含 
ODBC 接口 ， 在 处 理 速度 方面 也 非常 可 观 。 

Web SQL Database 规范 中 定义 了 3 个 核心 方法 ， 如 表 8-4 所 示 。 


表 8-4 Web SQL a 的 和 Msc 


‘openDatabase() pp 


ansaction | 允许 我 们 控制 事务 的 提交 或 回 滚 
[EECES9IO | 用 于 执行 真实 的 SQL 查询 


了 》1. 打开 数据 库 
openDatabase() 方法 可 以 打开 一 个 已 经 存在 的 数据 库 ， 如果 数据 库 不 存在 ， 它 可 以 创建 数据 库 。 
创建 并 打开 数据 库 的 语法 如 下 。 












Var db =openDatabase ("TestDB","1.0"," 测试 数据 库 ",2*1024*1024, creationCallback); 


该 方式 有 5 个 必需 的 参数 ， 第 1 个 参数 表示 数据 库 名 ; 第 2 个 参数 表示 版 本 号 ; 第 3 个 参数 表 
示 数 据 库 的 描述 ; 第 4 个 参数 表示 数据 库 的 大 小 ; 第 5 个 参数 表示 创建 回调 函数 ， 其 中 第 5 个 参数 
是 可 选 的 。 
》 2. 创建 数据 表 

transaction() 方法 可 以 进行 事务 处 理 ; executeSql() 方法 可 以 执行 SQL 语句 。 可 以 同时 使 用 
这 两 个 方法 ， 在 事务 中 处 理 SQL 语句 ， 创 建 数据 表 的 方法 如 下 。 


db.transaction (function (tx){ 
tx.executeSql ('CREATE TABLE IF NOT EXISTS UserName (id unique,Name) '); 
更 到 


使 用 transaction() 方法 传递 给 回调 函数 的 tx 是 一 个 transaction 对 象 ， 然 后 使 用 transaction 
对 象 的 executeSql() 方法 ， 可 以 执行 SQL 语句 ， 这 里 的 SQL 语句 就 是 创建 数据 表 的 命令 。 
》 3. 添加 数据 至 数据 库 表 

与 创建 数据 表 一 样 , 也 可 以 使 用 transaction() 方法 和 executeSql() 方 法 , 仅仅 是 SQL 语句 不 同 。 
使 用 插入 数据 的 SQL 语句 执行 数据 的 插入 操作 ， 添 加 数据 至 数据 库 表 的 方法 如 下 。 


db .transaction(function (tx) { 
tx.executesql ('INSERT INTO UserName (id,Name) VALUES (1, " 张 三 ")'); 
tx.executesql ('INSERT INTO UserName (id,Name) VALUES (2," 李 四")'); 
DD); 


两 个 包含 Insert INTO 命令 的 SQL 语句 ， 表 示 插 入 数据 ， 将 会 在 本 地 数据 库 TestDB 中 的 
UserName 表 中 添加 两 条 数据 。 
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了 》4. 读 取 数据 库 中 的 数据 
仍然 使 用 transaction() 方法 和 executeSql() 方法， 使 用 查询 SQL 语句 ， 并 在 executeSqlI() 
方法 中 添加 匿名 的 回调 处 理 函 数 ， 使 用 方法 如 下 。 


db.transaction (function (tx) { 

tx.executeSsql( “SELECT * FROM UserName’ 7[ ], Eunction(txvIesults) { 

Var len = results.rows.length; 

for (var i=0;i<len;i++) { 

console.log(results.rows.item(i) .Name); 
. 

rnuli)s 

Ds 


executeSdl() 方法 中 执行 了 包含 Select 命令 的 SQL 语句， 表示 查询 ， 将 从 本 地 数据 库 
TestDB 中 的 UserName 表 中 查询 信息 。 查 询 出 来 的 结果 会 传递 给 匿名 的 回调 函数 ， 可 以 在 回调 函 
数 中 处 理 查询 的 结果 ， 如 控制 台 输出 结果 。 


Web SQL 数据 库 涉及 SQL 相关 知识 ， 感 兴趣 的 读者 可 以 查询 SQL 相关 的 学 
习 资 料 和 书籍 ， 在 本 书 中 仅 对 Web SQL 数据 库 进行 简单 介绍 。 





本 章 主要 向 读者 介绍 了 HTML 5 中 的 本 地 存储 功能 ， 包 括 HTML 5 的 Web Storage 和 Web 
SQL 数据 库 ， 其 中 重点 介绍 了 Web Storage 接口 的 方法 和 事件 ， 另 外 还 介绍 了 JSON 对 象 ， 以 扩 
展 Storage 对 象 存储 的 复杂 性 。 完 成 本 章 内 容 的 学 习 ， 读 者 需要 掌握 Web Storage 本 地 存储 的 基本 
使 用 方法 ， 并 对 Web SQL 数据 库 有 一 定 的 了 解 。 
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章 知识 点 Vv 
第 9 章 CSS 样式 基础 er 


MY 掌握 各 类 CSS 选择 器 
对 于 网 页 而 言 ， 如 果 没 有 CSS 样式 的 辅助 是 做 不 出 优秀 的 了 解 CSS 3 新 增 的 选择 器 
网 页 的 ， 所 以 除了 熟悉 HTML 代码 ， 还 需要 掌握 CSS 样式 。 掌握 在 网 页 中 如 何 运用 CSS 
CSS 样式 是 一 种 对 Web 文档 添加 样式 的 简单 机 制 ， 是 一 种 表现 样式 
HTML 或 XML 等 文件 外 观 样式 的 计算 机 语言 ， 用 来 作为 网 页 的 
排版 与 布局 设计 ， 是 网 页 制作 过 程 中 不 可 缺少 的 重要 内 容 。 本 章 
将 介绍 CSS 样式 的 相关 基础 知识 。 





CSS 样式 是 对 HTML 语言 的 有 效 补充 ， 通 过 使 用 CSS 样式 ， 能 够 节省 许多 重复 性 的 格式 设置 ， 
例如 网 页 文字 的 大 小 和 颜色 等 。 通 过 CSS 样式 可 以 轻松 地 设置 网 页 元 素 的 显示 位 置 和 格式 ， 还 可 以 
使 用 CSS 3 新 增 的 样式 属性 ， 在 网 页 中 实现 动态 的 交互 效果 ， 大 大 提升 网 页 的 美观 性 。 









































在 HTML 中 ， 虽 然 有 <b>、<uU>、<i> 和 <p> 等 标签 可 以 控制 文本 或 图 像 等 内 容 的 显示 效果 ， 
但 这 些 标 签 的 功能 非常 有 限 ， 而 且 对 有 些 特定 的 网 站 需求 ， 用 这 些 标签 是 不 能 够 完成 的 ， 所 以 需要 引 
入 CSS 样式 。 

CSS 样式 称 为 层 考 样 式 表 ， 即 多 重 样式 定义 被 层 者 在 一 起 成 为 一 个 整体 ， 在 网 页 中 是 标准 的 布 
导语 言 ， 用 来 控制 元 素 的 尺寸 、 颜 色 和 排版 等 属性 。CSS 样式 是 由 W3C 发 布 的 ， 用 来 取代 基于 表 
格 布局 、 框 架 布局 以 及 其 他 非 标准 的 表现 方法 。 
引用 CSS 样式 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 格式 风格 代码 ”分 离开 ， 从 而 使 设计 者 可 
以 对 网 页 的 布局 进行 更 多 的 控制 。 利 用 CSS 样式 ， 可 以 将 站 点 上 的 所 有 网 页 都 指向 某 个 CSS 文件 ， 
设计 者 只 需要 修改 CSS 样式 中 的 代码 ， 整 个 网 页 上 对 应 的 样式 都 会 随 之 发 生 改变 。 
CSS 样式 是 一 组 格式 设置 规则 , 用 于 控制 Web 页 面 的 外 观 。 通 过 使 用 CSS 样式 设置 页 面 的 格式 ， 
可 以 将 页 面 的 内 容 与 表现 形式 分 离 。 页 面 内 容 存放 在 HTML 文档 中 ， 而 用 于 定义 表现 形式 的 CSS 
规则 存放 在 另 一 个 文件 中 。 将 内 容 与 表现 形式 分 离 ， 不 仅 可 以 使 维护 站 点 的 外 观 更 加 容易 ， 而 且 还 可 
以 使 HTML 文档 代码 更 加 简练 ， 缩 短 浏览 器 的 加 载 时 间 。 




















































































































































































































随 着 CSS 的 广泛 应 用 ，CSS 技术 也 越 来 越 成 熟 。CSS 现在 有 3 个 不 同 层次 的 标准 , 即 CSS 1、 
CSS 2 和 CSS 3。CSS 1 主要 定义 了 网 页 的 基本 属性 ， 如 字体 、 颜 色 和 空白 边 等 。CSS 2 在 此 基 
础 上 添加 了 一 些 高 级 功能 ， 如 浮动 和 定位 ， 以 及 一 些 高 级 选择 器 ， 如 子 选择 器 和 相 邻 选择 器 等 。CSS 
3 开始 遵循 模块 化 开发 ， 这 将 有 助 于 理 清 模块 化 规范 之 间 的 不 同 关系 ， 减 少 完整 文件 的 大 小 。 

®。 CSS 1 

CSS 1 是 CSS 的 第 一 层次 标准 ， 它 正式 发 布 于 1996 年 12 月 ， 在 1999 年 1 月 进行 了 修改 。 
该 标准 提供 简单 的 CSS 样式 表 机 制 ， 使 得 网 页 的 编写 者 可 以 通过 附属 的 样式 对 HTML 文档 的 表现 进 
行 描述 。 

e CSS2 

CSS 2 是 1998 年 5 月 正式 作为 标准 发 布 的 ，CSS 2 基于 CSS1， 包 含 了 CSS 1 的 所 有 特点 
和 功能 ， 并 在 多 个 领域 进行 完善 ， 将 样式 文档 与 文档 内 容 相 分 离 。CSS 2 支持 多 媒体 样式 表 ， 使 得 
网 页 设计 者 能 够 根据 不 同 的 输出 设备 为 文档 制订 不 同 的 表现 形式 。 

e CSS 3 

CSS 3 随 着 互联 网 的 发 展 ,网 页 的 表现 方式 更 加 多 样 化 , 需要 新 的 CSS 规则 来 适应 网 页 的 发 展 ， 
所 以 在 最 近 几 年 W3C 已 经 开始 着 手 CSS 3 标准 的 制订 。CSS 3 目前 还 处 于 工作 草案 阶段 ， 在 该 工 
作 草 案 中 制订 了 CSS 3 的 发 展 路 线 ， 详 细 列 出 了 所 有 模块 ， 并 在 逐步 进行 规范 。 目 前 许多 CSS 3 属 
性 已 经 得 到 了 浏览 器 的 广泛 支持 ， 让 我 们 已 经 可 以 领略 到 CSS 3 的 强大 功能 和 效果 。 


目前 CSS 3 规范 尚 处 于 完善 之 中 ， 因 此 浏览 器 的 支持 程度 各 有 不 同 。 为 了 让 用 户 能 够 体验 到 
CSS 3 的 好 处 ， 各 主流 浏览 器 都 定义 了 自己 的 私有 属性 。 

CSS 3 开始 遵循 模块 化 的 开发 。 以 前 的 规范 作为 一 个 模块 实在 是 太 庞大 而 且 比较 复杂 ， 所 以 ， 
CSS 3 把 它 分 解 为 多 个 小 的 模块 ， 这 样 有 助 于 理 清 各 个 模块 规范 之 间 的 关系 。 

CSS 3 的 模块 化 规范 ， 显 得 非常 灵活 。 一 个 CSS 规范 如 果 要 完整 地 获得 浏览 器 的 支持 ， 是 非常 
困难 的 ， 但 是 浏览 器 选择 完整 支持 某 个 模块 的 规范 是 比较 容易 实现 的 。 反 过 来 ， 如 果 要 衡量 一 个 浏览 
器 对 CSS 3 的 支持 程度 ， 可 以 对 各 个 模块 分 别 衡量 。 

CSS 3 模块 化 的 发 展 有 利于 未 来 的 扩展 。 当 CSS 需要 增加 新 的 规范 时 ， 非 常 不 希望 其 他 规范 也 
跟着 变动 。 模 块 化 的 发 展 ， 使 得 每 个 独立 的 模块 都 能 根据 需要 进行 独立 地 更 新 。 当 增加 新 的 特性 或 模 
块 时 ， 不 会 影响 已 经 存在 的 特性 。 


尽管 CSS 3 的 很 多 新 的 特性 很 受 开发 者 的 欢迎 ， 但 并 不 是 所 有 的 浏览 器 都 支持 它 。 各 个 主流 浏 
览 器 都 定义 了 各 自 的 私有 属性 ， 以 便 能 够 让 用 户 体验 CSS 3 的 新 特性 。 

私有 属性 固然 可 以 避免 不 同 浏览 器 中 解析 同一 个 属性 时 出 现 冲突 ， 但 是 也 给 设计 师 们 带 来 诸多 不 
便 ， 需 要 编写 更 多 的 CSS 代码 ， 而 且 也 没有 解决 同一 页 面 在 不 同 浏览 器 中 表现 不 一 致 的 问题 。 

尽管 私有 属性 有 很 多 浆 端 ， 但 是 也 为 设计 师 们 提供 了 较 大 的 选择 空间 ， 至 少 在 CSS 3 规范 发 布 
以 前 ， 能 表现 一 些 特定 的 CSS 3 的 效果 。 

采用 Webkit 内 核 浏览 器 ( 如 Safari、Chrome ) 的 私有 属性 的 前 缀 是 -webkit-; 采用 Gecko 
内 核 浏览 器 ( 如 Firefox ) 的 私有 属性 的 前 缀 是 -moz-; Opera 浏览 器 的 私有 属性 的 前 缀 是 -o-; 
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IE 浏览 器 ( 限于 IE8+ ) 的 私有 属性 的 前 缀 是 -ms 一 。 


与 之 前 的 版 本 相 比 ，CSS 3 的 改进 是 非常 大 的 。CSS 3 不 仅仅 进行 了 修订 和 完善 ， 更 增加 了 很 
多 新 的 特性 ， 把 样式 表 的 功能 发 挥 得 淋漓 尽 致 。 之 前 的 很 多 效果 都 借助 图 片 和 脚本 来 实现 ， 现 在 只 需 
要 几 行 代码 就 能 搞定 了 。 这 不 仅 简化 了 设计 师 的 工作 ， 页 面 代码 也 更 加 简洁 和 清晰 。 

CSS 3 的 全 新 功能 简介 如 表 9-1 所 示 。 


表 9-1 CSS 3 的 全 新 功能 简介 
说 明 

其 能 县 天 的 光 择 十 CSS 3 增加 了 更 多 的 CSS 选择 器 ， 可 以 实现 更 简单 但 是 更 强大 的 功能 

[区 宁 光 和 UL 在 CSS 3 中 ， 可 以 给 文字 添加 阴影 、 描 边 和 发 光 等 效果 ， 还 可 以 自 定义 特殊 的 字体 

在 CSS 3 中 ， 可 以 直接 给 边框 设计 圆 角 、 阴 影 、 边 框 背景 灯 ， 其 中 边框 背景 会 自动 把 
背景 图 切割 显示 

背景 图 片 的 设计 更 加 灵活 ， 不 但 可 以 改变 背景 图 片 的 大 小 、 裁 剪 背 景 图 片 ， 还 可 以 设置 
多 重 背 景 

CSS 3 的 色彩 模式 ， 除 了 支持 RGB 颜色 外 ， 还 支持 HSL ( 色调 、 饱 和 度 、 亮 度 ) ， 
并 且 针 对 这 两 种 色彩 模式 ， 又 增加 了 可 以 控制 透明 度 的 色彩 模式 

这 两 种 布局 ， 可 以 弥补 现 有 布局 中 的 不 足 ， 为 页 面 布局 提供 了 更 多 的 手段 ， 并 大 幅度 地 
缩减 了 代码 














有 了 CSS 3 的 动画 ， 设 计 师 们 不 用 编写 脚本 ， 直 接 就 可 以 让 页 面 元 素 动 起 来 ， 并 且 不 
会 影响 整体 的 页 面 布局 


CSS 样式 是 纯 文本 格式 文件 , 在 编辑 CSS 时 , 可 以 使 用 一 些 简单 的 纯 文 本 编辑 工具 , 例如 记事 本 ， 
同样 也 可 以 使 用 专业 的 CSS 编辑 工具 , 例如 Dreamweaver。CSS 样式 是 由 若干 条 样式 规则 组 成 的 ， 
这 些 样式 规则 可 以 应 用 到 不 同 的 元 素 或 文档 中 来 定义 它们 所 显示 的 外 观 。 


CSS 样式 由 选择 器 和 属性 构成 ，CSS 样式 的 基本 语法 如 下 。 
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下 面 是 在 HTML 页 面 内 直接 引用 CSS 样式 ， 这 个 方法 必须 把 CSS 样式 信息 包括 在 <style> 
和 </style> 标签 中 ， 为 了 使 样式 在 整个 页 面 中 产生 作用 ， 应 把 该 组 标签 及 内 容 放 到 <head> 和 </ 
head> 标签 中 去 。 

例如 ， 需 要 设置 HTML 页 面 中 所 有 <p> 标签 中 的 文字 都 显示 为 红色 ， 其 代码 如 下 。 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>Css 基本 语法 </title> 
<style type="text/css"> 

p {color: red;} 

</style> 

</head> 

<body> 

<p> 这 里 是 页 面 的 正文 内 容 </p> 
</body> 

</html> 


<style> 标签 中 包括 了 type="text/css"， 这 是 让 浏览 器 知道 是 使 用 CSS 样式 
规则 。 





在 使 用 CSS 样式 过 程 中 ， 经 常会 有 几 个 选择 器 用 到 同一 个 属性 ， 例 如 规定 页 面 中 凡是 粗 体 字 、 
斜体 字 和 1 号 标题 字 都 显示 为 蓝 色 ， 按 照 上 面 介绍 的 写法 应 该 将 CSS 样式 写 为 如 下 的 形式 。 


B {color: blue; } 
I{color: blue;} 


Hl1 { color: blue; } 





这 样 书写 十 分 麻烦 ， 在 CSS 样式 中 引进 了 分 组 的 概念 ， 可 以 将 相同 属性 的 样式 写 在 一 起 ，CSS 
样式 的 代码 就 会 简洁 很 多 ， 其 代码 形式 如 下 。 


B,I,Hl1 {color: blue ;} 
用 逗号 分 隔 各 个 CSS 样式 选择 器 ， 将 3 行 代码 合并 写 在 一 起 。 


所 有 CSS 样式 的 基础 就 是 CSS 规则 , 每 一 条 规则 都 是 一 条 单独 的 语句 , 确定 应 该 如 何 设计 样式 ， 
以 及 应 该 如 何 应 用 这 些 样式 。 因 此 ，CSS 样式 由 规则 列表 组 成 ,浏览 器 用 它 来 确定 页 面 的 显示 效果 。 

CSS 由 两 部 分 组 成 : 选择 器 和 声明 ， 其 中 声明 由 属性 和 属性 值 组 成 ， 所 以 简单 的 CSS 规则 形 
式 如 下 。 
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声明 

#box{ | 

Width:100$; 一 一 一 一 一 一 属性 值 
height:900px; 





选择 器 





属性 


。 选择 器 

选择 器 部 分 指定 对 文档 中 的 哪个 对 象 进行 定义 ， 选 择 器 最 简单 的 类 型 是 “标签 选择 器 ”， 它 可 以 
直接 输入 HTML 标签 的 名 称 ， 便 可 以 对 其 进行 定义 ， 例 如 定义 HTML 中 的 <p> 标签 ， 只 要 给 出 < > 
尖 括 号 内 的 标签 名 称 ， 用 户 就 可 以 编写 标签 选择 器 了 。 

。 声明 

声明 包含 在 { 大 括号 内 ， 在 大 括号 中 首先 给 出 属性 名 ， 接 着 是 冒号 ， 然 后 是 属性 值 ， 结 尾 分 号 是 
可 选项 ， 推 荐 使 用 结尾 分 号 ， 整 条 规则 以 结尾 大 括号 结束 。 

。 属性 

属性 由 官方 CSS 规范 定义 。 用 户 可 以 定义 特有 的 样式 效果 ， 与 CSS 兼容 的 浏览 器 会 支持 这 些 
效果 ， 尽 管 有 些 浏览 器 识别 不 是 正式 语言 规范 部 分 的 非 标 准 属性 ， 但 是 大 多 数 浏览 器 很 可 能 会 忽略 一 
些 非 CSS 规范 部 分 的 属性 ， 最 好 不 要 依赖 这 些 专 有 的 扩展 属性 ， 不 识别 它们 的 浏览 器 只 是 简单 地 忽 
略 他 们 。 

。 属性 值 

声明 的 值 放 置 在 属性 名 和 冒号 之 后 。 它 确切 定义 应 该 如 何 设置 属性 。 每 个 属性 值 的 范围 也 在 
CSS 规范 中 定义 。 


在 CSS 样式 中 提供 了 多 种 类 型 的 CSS 选择 器 ， 包 括 通配符 选择 器 、 标 签 选择 器 、 类 选择 器 、 
id 选择 器 和 伪 类 选择 器 等 ， 还 有 一 些 特殊 的 选择 器 ， 在 创建 CSS 样式 时 ， 首 先 需要 了 解 各 种 选择 器 
类 型 的 作用 。 


如 果 接 触 过 Dos 命令 或 是 Word 中 的 替换 功能 ， 对 于 通 配 操作 应 该 不 会 陌生 ， 通 配 是 指使 用 字 
符 蔡 代 不 确定 的 字 ， 如 在 Dos 命令 中 ， 使 用 *.* 表示 所 有 文件 ， 使 用 *.bat 表示 所 有 扩展 名 为 bat 的 
文件 。 因 此 ， 所 谓 的 通配符 选择 器 ， 也 是 指 对 对 象 可 以 使 用 模糊 指定 的 方式 进行 选择 。CSS 的 通 配 
符 选择 器 可 以 使 用 * 作为 关键 字 ， 使 用 方法 如 下 。 


和 
属性 : 属性 值 ; 
区 


* 号 表示 所 有 对 象 ， 包 含 所 有 不 同 id 不 同 class 的 HTML 的 所 有 标签 。 使 用 如 上 的 选择 器 进行 
样式 定义 ， 页 面 中 所 有 对 象 都 会 使 用 相同 的 属性 设置 。 
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HTML 文档 是 由 多 个 不 同 的 标签 组 成 ，CSS 标签 选择 器 可 以 用 来 控制 标签 的 应 用 样式 。 例 如 p 
选择 器 是 用 来 控制 页 面 中 的 所 有 <p> 标签 的 样式 风格 。 
标签 选择 器 的 语法 格式 如 下 。 


如 果 在 整个 网 站 中 经 常会 出 现 一 些 基本 样式 ， 可 以 采用 具体 的 标签 来 命名 ， 从 而 达到 对 文档 中 标 
签 出 现 的 地 方 应 用 标签 样式 ， 使 用 方法 如 下 所 示 。 


body{ 
font-family: 宋体 了 
font-size:12px; 
color:#999999; 

} 


创建 通 配 选择 器 和 标签 选择 器 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 9 章 \9-3-2.html 。 视频 : 光盘 \ 视 频 \ 第 9 章 \9-3-2.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 9 章 \9-3-2.html”, 可 以 看 到 页 面 效果 ， 
如 图 9-1 所 示 。 在 浏览 器 中 预览 该 页 面 ， 可 以 看 到 预览 效果 ， 如 图 9-2 所 示 。 


Er 

















器 的 四 边 边界 ， 这 是 因为 网 页 中 许多 元 素 默认 的 边界 和 填充 属性 值 并 不 为 0， 包括 


本 通过 在 页 面 的 设计 视图 和 在 浏览 器 中 预览 ， 可 以 看 出 页 面 内 容 并 没有 项 到 浏览 
<body> 标签 ， 所 在 页 面 内 容 并 没有 沿 着 浏览 器 窗口 的 四 边 边 界 显 示 。 


国 3 轴 | 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 , 创建 通配符 * 的 CSS 样式 , 如 图 9-3 所 示 。 
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保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 效 果 ， 如 图 9-4 所 示 。 





Ee:: 
margin: Qpx; 
padding: 9px; 














图 9-3 图 9-4 


在 该 网 页 中 因为 没有 定义 body 标签 的 CSS 样式 ， 所 以 页 面 的 背景 显示 为 默认 
的 白色 背景 ， 页 面 中 的 字体 和 字体 大 小 也 都 显示 为 默认 的 效果 。 


国 思 | 转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 body 标签 的 CSS 样式 ， 如 图 9-5 所 示 。 保 存 外 部 
CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 效 果 ， 如 图 9-6 所 示 。 





body 忒 
font-family: 微软 雅 黑 ; 
font-size: 18px; 
line-height: 30px; 
font-weight: bold; | 
color: #FFF; 交加 过 入 生 们 的 网 站 | 
background-color: #2B4346} 


ENTER 











图 9-5 图 9-6 


现 一 次 , 例如 <body> 标签 ， 如 果 定义 了 两 次 <body> 标签 的 CSS 样式， 则 两 个 


FE HTML 标签 在 网 页 中 都 是 具有 特定 作用 的 ， 并 且 有 些 标签 在 一 个 网 页 中 只 能 出 
CSS 样式 中 相同 属性 设置 会 出 现 覆 盖 的 情况 。 


id 选择 器 是 根据 DOM 文档 对 象 模 型 原理 所 出 现 的 选择 器 类 型 ， 对 于 一 个 网 页 而 言 ， 其 中 的 每 
个 标签 ( 或 其 他 对 象 ) ， 均 可 以 使 用 一 个 id=" " 的 形式 ， 对 id 属性 进行 一 个 名 称 的 指派 ，id 可 以 理 
解 为 一 个 标识 ， 在 网 页 中 每 个 id 名 称 只 能 使 用 一 次 。 
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<div id="top"></div> 


如 本 例 所 示 ，HTML 中 的 一 个 div 标签 被 指定 了 id 名 称 为 top。 
在 CSS 样式 中 ，id 选择 器 使 用 # 进行 标识 ， 如 果 需 要 对 id 名 为 top 的 标签 设置 样式 ， 应 当 使 
用 如 下 格式 。 


id 的 基本 作用 是 对 每 一 个 页 面 中 的 唯一 出 现 的 元 素 进行 定义 ， 如 可 以 对 导航 条 命名 为 nav， 对 网 
页 头 部 和 底部 命名 为 header 和 footer， 对 于 类 似 于 此 的 元 素 在 页 面 中 均 出 现 一 次 ， 使 用 id 命名 具 
有 进行 唯一 性 的 指派 含义 ， 有 助 于 代码 阅读 及 使 用 。 


在 网 页 中 通过 使 用 标签 选择 器 ， 可 以 控制 网 页 所 有 该 标签 显示 的 样式 ， 但 是 ， 根 据 网 页 设计 过 程 
中 的 实际 需要 ， 标 签 选 择 器 对 设置 个 别 标签 的 样式 还 是 力 不 能 及 的 ， 因 此 ， 就 需要 使 用 类 ( class ) 
选择 器 ， 来 达到 特殊 效果 的 设置 。 

类 选择 器 用 来 为 一 系列 的 标签 定义 相同 的 显示 样式 ， 其 基本 语法 如 下 。 


- 类 名 称 { 
属性 : 属性 值 ; 


} 


类 名 称 表示 类 选择 器 的 名 称 ， 其 具体 名 称 由 CSS 定义 者 自己 命名 。 在 定义 类 选择 器 时 ， 需 要 在 
类 名 称 前 面 加 一 个 英文 句点 (. ) 。 


.font01 { color: black;} 
.font02 { font-size: 12px;} 


以 上 定义 了 两 个 类 选择 器 ， 分 别 是 font01 和 font02。 类 的 名 称 可 以 是 任意 英文 字符 串 ， 也 可 以 
是 以 英文 字母 开头 与 数字 组 合 的 名 称 ， 通 常情 况 下 ， 这 些 名 称 都 是 其 效果 与 功能 的 简要 缩写 。 
可 以 使 用 HTML 标签 的 class 属性 来 引用 类 选择 器 。 


<p class="font01">class 属性 是 被 用 来 引用 类 选择 器 的 属性 </p> 


以 上 所 定义 的 类 选择 器 被 应 用 于 指定 的 HTML 标签 中 ( 如 <p> 标签 ) ， 同 时 它 还 可 以 应 用 于 不 
同 的 HTML 标签 中 ， 使 其 显示 出 相同 的 样式 。 


<p class="font01"> 段落 样式 </p> 
<hl class="font01"> 标题 样式 </h1> 
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创建 id 选择 器 和 类 选择 器 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 9 章 \9-3-4.html ”视频 : 光盘 \ 视 频 \ 第 9 章 \9-3-4.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 9 章 \9-3-4.html”, 可 以 看 到 页 面 效果 ， 
如 图 9-7 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 页 面 的 HTML 代码 ， 如 图 9-8 所 示 。 
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div id="text"> Welcome<br> 

了 迎 来 到 麻 异 网 页 设计 工作 享 简称 奇异 工作 室 ) <br> 

作 和 领域: 网 页 设计 、 平 面 广告 设计 等 。<br> 

<br> 

<br> 

<img src="images/93462.png" width="257" height="213" alt=| 
/> 


/div> 
~ K/body> 











图 9-8 


在 该 网 页 中 因为 没有 定义 id 名 称 为 text 的 Div 的 CSS 样式 ， 所 以 其 内 容 在 网 
页 中 显示 的 是 默认 的 效果 ， 并 不 符合 页 面 整体 风格 的 需要 。 


2 王 。 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 , 创建 名 称 为 #ext 的 id CSS 样式 , 如 图 9-9 





Ftext{ 
width: 360px; 
height: auto; 
overflow: hidden; 
line-height: 39px; 
text-align: center; 
margin: 180px auto 60px auto; 














上 
图 9-9 图 9-10 
id 选择 器 与 类 选择 器 有 一 定 的 区 别 ， 它 并 不 像 类 选择 器 那样 可 以 给 任意 数量 的 标 
国 签 定义 样式 ， 它 在 页 面 的 标签 中 只 能 使 用 一 次 ; 同时 ，id 选择 器 比 类 选择 器 还 具有 更 
高 的 优先 级 ， 当 id 选择 器 与 类 选择 器 发 生 冲 突 时 ， 将 会 优先 使 用 id 选择 器 。 


葬 3 轩 | 转换 到 外 部 CSS 样式 表 文 件 中 ， 创 建 名 称 为 .font01 的 类 CSS 样式 ， 如 图 9-11 所 示 。 返 
回 设计 页 面 中 ， 选 中 页 面 中 相应 的 文字 ， 在 “属性 ”面板 上 的 “类 ”下 拉 列 表 中 选择 刚 定义 的 font01 
类 CSS 样式 应 用 ， 如 图 9-12 所 示 。 
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fontgl { 
font-family: "Arial Black"; 
font-size: 36px; 
line-height: S50px; 














图 9-11 


[本 完成 类 CSS 样式 应 用 , 可 以 看 到 文字 效果 , 如 图 9-13 所 示 。 转 换 到 外 部 CSS 样式 表 文 件 中 ， 
创建 名 称 为 .font02 的 类 CSS 样式 ， 如 图 9-14 所 示 。 


Welcome 


欢迎 来 到 奇异 网 页 设计 工作 室 ( 简称 奇异 工作 室 ) 
工作 领域 : 网 页 设计 、 平 面 广告 设计 等 . 





Font62 + 
font-weight: boldi 
color: #DF4C2A; 








图 9-13 图 9-14 


[王国 返回 设计 页 面 中 ， 选 中 页 面 中 相应 的 文字 ， 为 其 应 用 名 为 font02 的 类 CSS 样式 ， 效 果 如 图 
9-15 所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 效果 ， 如 
9-16 所 示 。 


~ 


欢迎 来 到 奇异 网 页 设计 工作 室 ( 简称 奇异 工作 室 ) 
工作 领域 : 网 页 设计 、 平 面 广告 设计 等 。 


图 9-15 





新 建 类 CSS 样式 时 ， 默 认 在 类 CSS 样式 名 称 前 有 一 个 “.”。 这 个 “.” 说 明 
了 此 CSS 样式 是 一 个 类 CSS 样式 ( class ) , 根据 CSS 规则 , 类 CSS 样式 ( class ) 
必须 为 网 页 中 的 元 素 应 用 才 会 生效 ， 类 CSS 样式 可 以 在 一 个 HTML 元 素 中 被 多 次 
调用 。 
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伪 类 及 伪 对 象 是 一 种 特殊 的 类 和 对 象 , 由 CSS 样式 自动 支持 , 属 CSS 的 一 种 扩展 类 型 和 对 象 ， 
名 称 不 能 被 用 户 自 定义 ， 使 用 时 只 能 够 按 标准 格式 进行 应 用 。 使 用 形式 如 下 。 


a:hover{ 
background-color:#ffffff; 


伪 类 和 伪 对 象 由 以 下 两 种 形式 组 成 。 
选择 器 : 伪 类 
选择 器 : 伪 对 象 


上 面 说 到 的 hover 便 是 一 个 伪 类 ， 用 于 指定 对 象 的 鼠标 经 过 状态 。CSS 样式 中 内 置 了 几 个 标准 
的 伪 类 用 于 用 户 的 样式 定义 。 
CSS 样式 内 置 伪 类 的 介绍 如 表 9-2 所 示 。 


表 9-2 CSS 样式 中 内 置 的 伪 类 


| 人 塘 类 用 途 
[AR a 短 接 标签 的 未 被 访问 前 的 样式 


[NGN 对 象 在 鼠标 移动 时 的 样式 
[SC 对 象 被 用 户 点 击 及 被 点 击 释放 之 间 的 样式 


[AASNGO Ra 链接 对 象 被 访问 后 的 样式 
[GAUSUR 对 象 成 为 输入 焦点 时 的 样式 
si 可 对象 的 第 一 个 子 对 象 的 样式 
国 旨 对 于 页 面 的 第 一 页 使 用 的 样式 





同样 CSS 样式 中 内 置 了 几 个 标准 伪 对 象 用 于 用 户 的 样式 定义 ，CSS 样式 中 内 置 伪 对 象 的 介绍 
如 表 9-3 所 示 。 


表 9-3 CSS 样式 中 内 置 的 伪 对 象 
| EE 
Eafe 四 设置 某 一 个 对 象 之 后 的 内 容 
rst=jetter 对象 内 的 第 一 个 字符 的 样式 设置 

[而 sie 对象 内 第 一 行 的 样式 设置 

[GO 设置 某 一 个 对 象 之 前 的 内 容 


实际 上 ， 除 了 对 链接 样式 控制 的 :hover、:active 几 个 伪 类 之 外 ， 大 多 数 伪 类 及 伪 对 象 在 实际 使 
用 上 并 不 常见 。 设 计 者 所 接触 到 的 CSS 布局 中 ， 大 部 分 是 关于 排版 的 样式 ， 对 于 伪 类 及 伪 对 象 所 支 
持 的 多 类 属性 基本 上 很 少 用 到 ， 但 是 不 排除 使 用 的 可 能 ， 由 此 也 可 看 到 CSS 对 样式 及 样式 中 对 象 的 
逻辑 关系 、 对 象 组 织 提 供 了 很 多 便利 的 接口 。 
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伪 类 CSS 样式 在 网 页 中 应 用 最 广泛 的 是 在 网 页 的 超 链接 中 ， 但 是 也 可 以 为 其 
提示 圈 “他 的 网 页 元 素 应 用 伪 类 CSS 样式 ， 特 别 是 :hover 伪 类 ， 该 伪 类 是 当 鼠 标 移 至 元 
素 上 时 的 状态 ， 通 过 该 伪 类 CSS 样式 的 应 用 可 以 在 网 页 中 实现 许多 交互 效果 。 


创建 超 链接 伪 类 选择 器 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 9 章 \9-3-5.html 视频: 光盘 \ 视 频 \ 第 9 章 \9-3-5.mp4 


[ES 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 9 章 \9-3-5.html”, 可 以 看 到 页 面 效果 ， 
如 图 9-17 所 示 。 选 中 页 面 中 相应 的 文字 ， 并 为 该 文字 创建 空 链接 ， 如 图 9-18 所 示 。 








类 无 
DD# 
图 9-17 图 9-18 


区 在 浏览 器 中 预览 该 页 面 ， 可 以 看 到 网 页 中 默认 的 超 链接 文字 的 效果 ， 如 图 9-19 所 示 。 转 换 
到 该 文件 所 链接 的 外 部 CSS 样式 表 文件 中 , 创建 超 链接 标签 a 的 4 种 伪 类 CSS 样 式 , 如 图 9-20 所 示 。 


BETInK Tt 
color: #FFF; 
text-decoration: none; 





) 

B:visited { 
text-decoration: none; 
color: #999999; 


B:hover { 
text-decoration: underline]| 
color: #FF6600; 

上 

B:active { 
text-decoration: none; 
color: #68666CC; 











上 





图 9-19 图 9-20 


[ 国 国 返回 设计 视图 中 ， 可 以 看 见 链接 文字 的 效果 ， 如 图 9-21 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 
样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 中 超 链接 文字 的 效果 ， 如 图 9-22 所 示 。 
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欢迎 进入 我 们 的 网 站 ! 


ENTER 





图 9-21 


通过 对 超 链接 <a> 标签 的 4 种 伪 类 CSS 样式 进行 设置 ， 可 以 控制 网 页 中 所 
有 的 超 链接 文字 的 样式 ， 如 果 需 要 在 网 页 中 实现 不 同 的 超 链接 样式 ， 则 可 以 定义 类 
CSS 样式 的 4 种 伪 类 或 id CSS 样式 的 4 种 伪 类 来 实现 。 





可 以 对 单个 HTML 对 象 进行 CSS 样式 设置 ， 同 样 可 以 对 一 组 对 象 进行 相同 的 CSS 样式 设置 。 


hl,h2,h3,p,span1{ 
font-size: 12px; 
font-family: 宋体 ;7 
1 


使 用 逗号 对 选择 器 进行 分 隔 ， 使 得 页 面 中 所 有 的 <h1>、<h2>、<h3>、<p> 和 <span> 标签 都 
将 具有 相同 的 样式 定义 ， 这 样 做 的 好 处 是 对 页 面 中 需要 使 用 相同 样式 的 地 方 只 需要 书写 一 次 CSS 样 
式 即 可 实现 ， 减 少 代 码 量 ， 改 善 CSS 代码 的 结构 。 


例如 下 面 的 CSS 样式 代码 。 


hl span { 
font-weight: bold; 
} 


当 仅 仅 想 对 某 一 个 对 象 中 的 “ 子 ” 对 象 进行 样式 设置 时 ， 派 生 选 择 器 就 被 派 上 了 用 场 ， 派 生 选 择 


器 指 选 择 器 组 合 中 前 一 个 对 象 包含 后 一 个 对 象 ， 对 象 之 间 使 用 空格 作为 分 隔 符 ， 如 本 例 所 示 ， 对 h1 
下 的 span 进行 样式 设置 ， 最 后 应 用 到 HTML 是 如 下 格式 。 


@16s 


<h1> 这 是 一 段 文本 <span> 这 是 span 内 的 文本 </span></hl> 

<h1> 单独 的 h1</hl1> 

<span> 单独 的 span</span> 

<h2> 被 h2 标签 套用 的 文本 <span> 这 是 h2 下 的 span</span></h2> 


h1 标签 之 中 的 span 标签 将 被 应 用 font-weight:bold 的 样式 设置 ， 注 意 ， 仅 仅 对 有 此 结构 的 标 
签 有 效 , 对 于 单独 存在 的 h1 或 是 单独 存在 的 span 及 其 他 非 h1 标签 下 属 的 span 均 不 会 应 用 此 样式 。 

这 样 做 能 帮助 避免 过 多 的 id 及 class 的 设置 ， 直 接 对 所 需要 设置 的 元 素 进行 设置 ， 派 生 选 择 器 
除了 可 以 二 者 包含 ， 也 可 以 多 级 包含 ， 例 如 以 下 选择 器 样式 同样 能 够 使 用 。 


bodyhl span { 
font-weight: bold; 
} 


创建 群 组 选择 器 和 派生 选择 器 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 9 章 \9-3-7.html 。 视频 : 光盘 \ 视 频 \ 第 9 章 \9-3-7.mp4 


I 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 9 章 \9-3-7.html”, 可 以 看 到 页 面 效果 ， 
如 图 9-23 所 示 。 在 浏览 器 中 预览 该 页 面 ， 可 以 看 到 网 页 的 效果 ， 如 图 9-24 所 示 。 












图 9-23 图 9-24 


本 Ez 转换 到 代码 视图 中 ， 可 以 看 到 该 网 页 的 HTML 代码 ， 如 图 9-25 所 示 。 转 换 到 外 部 CSS 样 
式 表 文件 中 ， 创 建 名 称 为 #pic1,#pic2,#pic3 的 群 组 选择 器 CSS 样式 ， 如 图 9-26 所 示 。 








Bpicl, #pic2,#pic3 划 
width: 272px; 
height: 365px; 
background-color: #F3F3F3; 
margin: Opx 8px; 
padding: ©px 19px 19px 19pxj| 


> 
"> 生地 和 进口 水 蝇 cyspan><br> 

丽 光芒 。 五 
float: left; 


， 纺 放出 不 同 寻常 的 缚 而: 

















图 9-25 图 9-26 
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国葬 保存 页 面 并 保存 外 部 CSS 样式 表 文 件 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 页 面 的 效果 , 如 图 9-27 
所 示 。 转 换 到 外 部 CSS 样式 表 文 件 中 ， 创 建 名 称 为 #pic1 img,#pic2 img,#pic3 img 的 派生 选择 器 
CSS 样式 ， 如 图 9-28 所 示 。 





border: solid 3px #669933; 








Bpicl img,#pic2 img,#pic3 img | 
] 1 
图 9-27 图 9-28 


[ER 国保 存 页 面 并 保存 外 部 CSS 样式 表 文件 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 页 面 的 效果 , 如 图 9-29 
所 示 。 








图 9-29 


派生 选择 器 是 指 选择 器 组 合 中 的 前 一 个 对 象 包含 后 一 个 对 象 ， 对 象 之 间 使 用 空 
国 格 作为 分 隔 符 。 这 样 做 能 够 避免 定义 过 多 的 id 和 类 CSS 样式 ， 直 接 对 需要 设置 的 
元 素 进 行 设置 。 派 生 选 择 器 除了 可 以 二 级 包含 ， 也 可 以 多 级 包含 。 








在 CSS 样式 表 中 ， 选 择 器 是 一 个 非常 重要 的 功能 。 伴 随 着 CSS 3 和 HTML 5 的 发 展 ， 选 择 器 
的 功能 已 经 超出 了 CSS 的 应 用 范围 ， 发 展 成 为 一 个 独立 的 选择 器 规范 。 针 对 CSS 样式 表 选 择 器 ， 
在 CSS 3 中 新 增 了 4 种 选择 器 类 型 ， 分 别 是 属性 选择 器 、 结 构 伪 类 选择 器 、UI 元 素 状态 伪 类 选择 器 
和 伪 元 素 选 择 器 。 本 节 将 详细 介绍 这 4 种 新 增 的 选择 器 。 
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属性 选择 器 是 指 直接 使 用 属性 控制 HTML 标签 样式 ， 它 可 以 根据 某 个 属性 是 否 存在 或 者 通过 属 
性 值 来 查找 元 素 ， 具 有 很 强大 的 效果 。 与 使 用 CSS 样式 对 HTML 标签 进行 修饰 有 很 大 的 不 同 ， 它 避 
免 了 通过 使 用 HTML 标签 名 称 或 自 定义 名 称 指向 具体 的 HTML 元 素 ， 来 达到 控制 HTML 标签 样式 
的 目的 ， 因 此 具有 很 大 的 方便 性 。 

常见 的 属性 选择 器 说 明 如 表 9-4 所 示 。 


表 9-4 常见 的 属性 选择 器 

选择 器 | 说 。 明 

| 选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性。 注意 ，E 选择 器 可 以 省 略 ， 表 示 选 择 定义 
了 foo 属性 的 任意 类 型 元 素 

| 选择 匹配 E 的 元 素 ， 且 该 元 素 将 foo 属性 值 定义 为 "bar"。 注 意 ，E 选择 器 可 以 省 略 ， 用 
法 与 上 一 个 选择 器 类 似 

选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 是 一 个 以 空格 符 分 割 的 列表 ， 其 
中 一 个 列表 的 值 为 "bar" 。 注 意 ，E 选择 器 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ， 
altitle~="b1"] 匹配 <a title="b1 b2 b3"></a>， 而 不 匹配 <a title="b2 b3 b5"></a> 
选择 匹配 E 的 元 素 , 上 且 该 元 素 定义 了 foo 属性 , foo 属性 值 是 一 个 用 连 字符 ( - ) 分 割 的 列表 ， 
值 开头 的 字符 为 "en"。 例 如 ，[langl="en"] 匹配 <body lang="en-us"></body>， 而 不 
是 匹配 <body lang="f-ag"></body> 

选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 , foo 属性 值 包含 前 缀 为 "bar" 的 子 字 串 符 。 
注意 ，E 选择 器 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ，body[lang^="en"] 匹配 
<body lang="en-us"></body>, 而 不 匹配 <body lang="f-ag"></body> 

选择 匹配 EE 的 元 素 ， 且 该 元 素 定 义 了 foo 属性 ，foo 属性 值 包含 后 缀 为 ”bar” 的 子 字符 


串 。 注 意 ,E 选择 器 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ，img[src$="jpg"] 匹 
配 <img src="p.jpg"/>， 而 不 匹配 <img src="p.gif"/> 








选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 包含 "b" 的 子 字符 串 。 注 意 ， 
E 选择 器 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ，img[src$="jpg"] 匹配 <img 
src="p.jpg"/>, 而 不 匹配 <img src="p.gif"/> 


在 网 页 中 使 用 属性 选择 器 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 9 章 \9-4-1.html 。 视频 : 光盘 \ 视 频 \ 第 9 章 \9-4-1.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 9 章 \9-4-1.html”, 可 以 看 到 页 面 效果 ， 
如 图 9-30 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 界面 代码 ， 如 图 9-31 所 示 。 








- 





他 

py 

py EN <Jp> <f 
/dtv 


body 


图 9-30 图 9-31 
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[EE 国 转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 属性 选择 器 ， 如 图 9-32 所 示 。 返 回 设计 视图 中 ， 可 
以 看 到 列表 中 以 字母 A 开始 的 行 背景 变化 ， 如 图 9-33 所 示 。 











/* 属 性 选择 符 E[attr^="val"]* 
i[dc*="A"] { 
background-color:#FCQ; 








图 9-32 









”Banana : 理 生 ( xiangj 


iao ) 


”Blueberry : 蓝莓 (lanmei ) 
”Cumquat : 全 桔 (jinju ) 


Lemon : 柠檬 (ningm 


”Durian : 权 连 (liulian ) 
eng ) 


图 9-33 


此 处 lildc^="A"] 匹配 了 属性 dc 的 值 是 以 "A" 开头 的 1 元 素 。 


[GE 玫 转换 到 外 部 CSS 样式 表 文 件 中 ， 修 改 属 性 选择 器 设置 代码 ， 如 图 9-34 所 示 。 返 回 设计 


视图 中 ， 可 以 看 到 列表 中 以 字母 { 结束 的 行 背 景 变化 ， 如 图 9-35 所 示 。 











/* 属 性 选择 符 E[attrS$="vatL']* 
i[de$="e"] { 
background-color:#FCQ; 








图 9-34 


此 处 lildc$="t"] 匹配 了 属性 dc 的 值 时 以 "t" 结尾 的 |i 元素。 


区 转换 到 外 部 CSS 样式 表 文件 中 ,修改 属性 选择 器 设置 代码 ,如 图 9-36 所 示 。 返 回 设计 视图 中 ， 


》 Apple 平 果 ( pingguo 


”Arbutus : 杨梅 ( yangmei ) 


) 


Banana : 香 菩 (xiangjiao ) 


»” Blueberry : 蓝莓 (lanmei ) 


Durian : 榴莲 ( liulian ) 
> Lemon : 柠檬 ( ningmeng ) 


可 以 看 到 列表 中 含有 字母 e 的 行 背景 变化 ， 如 图 9-37 所 示 。 


”Apricot : 杏子 (Xingzi) 


”Arbutus : 杨梅 (yangmei ) 
> Banana : 香 匠 ( xiangjiao ) 





/* 属 性 选择 符 E[attr*="vatL] 
i[dc*="e"] { 





background-color:#FCO; 








图 9-36 
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> Cumquat : 全 桔 (jinju ) 
> Durian : 桥 赴 (liulian ) 


此 处 lildc*="e"] 匹配 了 属性 dc 的 值 含 有 字符 "e" 的 ii 元素。 





结构 伪 类 选择 器 是 指 运用 文档 结构 树 来 实现 元 素 过 滤 ， 简 单 来 说 ， 就 是 利用 文档 结构 之 间 的 相互 关 
系 来 匹配 指定 的 元 素 ， 用 来 减少 文档 内 对 class 属性 以 及 id 属性 的 定义 ， 从 而 可 以 使 整个 文档 更 加 简练 。 
常见 的 结构 伪 类 选择 器 说 明 如 表 9-5 所 示 。 


表 9-5 常见 的 结构 伪 类 选择 器 
说 明 
选择 匹配 E 所 在 文档 的 根 元 素 。 所 谓 根 元 素 就 是 位 于 文档 结构 中 的 顶层 元 素 。 在 HTML 
页 面 中 ， 根 元 素 就 是 html 元 素 ， 此 时 该 选择 器 与 html 类 型 选择 器 匹配 的 内 容 相同 
Ena 选择 匹配 所 有 不 匹配 简单 选择 器 s 的 E 元 素 
[EGR LU 选择 匹配 E 的 元 素 ， 且 该 元 素 不 包含 子 节点 。 文 本 也 属于 节点 
[EU 选择 匹配 当前 链接 地 址 指向 的 E 元 素 
Ensecnia | 匹配 父 元 素 的 第 一 个 子 元 素 
Em 可 匹配 父 元 素 的 最 后 一 个 子 元 素 ， 等 同 于 :nth-last-child(1) 
匹配 父 元 素 中 第 n 个 位 置 的 子 元 素 。 其 中 ， 参 数 m 可 以 是 一 个 数字 、 关 键 字 ( odd、 
event) 、 公 式 ( 2n、2n+1 等 ) 。 参 数 n 的 索引 起 始 值 为 1， 而 不 是 0。 使 用 方法 例如 : 
tr:nth-child(3) 匹配 表格 中 的 第 三 个 tr 元素; tr:nth-child(2n) 和 tr:nth-child(event) 
匹配 表格 中 的 第 偶数 个 tr 元 素 ; tr:nth-child(2n+1) 和 tr:nth-child(odd) 匹配 表格 中 第 
奇数 个 tr 元 素 
[EAIEISSIEECHiid(i 匹配 父 元 素 的 倒数 第 n 个 子 元 素 E 
Eony=enia 匹配 父 元 素 下 仅 有 的 一 个 子 元 素 E 
[ETISIEOIEUS | 匹配 父 元 素 下 使 用 同 种 标签 的 第 一 个 同 级 兄弟 元 素 E 
EE6EYype UL 匹配 父 元 素 下 使 用 同 种 标签 的 最 后 一 个 同 级 兄弟 元 素 E 
LENNEOEIS LU 匹配 父 元 素 下 使 用 同 种 标签 的 唯一 一 个 同 级 兄弟 元 素 E 
[EAIEOEIDS() 匹配 父 元 素 下 使 用 同 种 标签 的 第 n 个 同 级 兄弟 元 素 E 


[| 匹配 父 元 素 下 使 用 同 种 标签 的 倒数 第 n 个 同 级 兄弟 元 素 E 


UI 元 素 状 态 包括 可 用 、 不 可 用 、 选 中 、 未 选中 、 获 取 焦点 、 失 去 焦点 、 锁 定 和 待机 等 。 在 CSS 
3 中 提供 了 UI 元 素 状态 伪 类 选择 器 ， 可 以 设置 元 素 处 在 某 种 状态 下 的 样式 ， 在 人 机 交互 过 程 中 ， 只 
要 元 素 的 状态 发 生 了 变化 ， 选 择 器 就 有 可 能 会 匹配 成 功 。 

常用 的 UI 元 素 状 态 伪 类 选择 器 说 明 如 表 9-6 所 示 。 
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表 9-6 常见 的 Ul 元 素 状态 伪 类 选择 器 

说 明 

选择 匹配 E 的 所 有 可 用 UI 元 素 。 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包 含 在 form 元 
素 内 的 表单 元 素 。 例 如 input:enabled 匹配 <form><input type=text/><input 
ey disabled="disabled"/></form> 代码 中 的 文本 框 ， 而 不 匹配 代码 中 的 















i 注意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包含 在 form 元 素 内 
的 表单 元 素 。 例 如 input:disabled 匹配 <form><input type=text><input type=button 
disabled="disabled"></form> 代码 中 的 按钮 ， 而 不 匹配 代码 中 的 文本 框 

选择 匹配 E 的 所 有 可 用 UI 元 素 。 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包含 在 from 元 
素 内 的 表单 元 素 。 例 如 input:checked 匹配 <form><input type=checkbox><input 
2 checked="checked"></form> 代码 中 的 单 选 按钮 ， 但 不 匹配 该 代码 中 的 


CSS 3 中 新 增 的 这 3 个 UI 元 素 状 态 伪 类 选择 器 主要 应 用 于 表单 的 设计 ， 可 以 
设计 出 交互 性 更 强 、 更 具有 人 性 化 的 表单 UI 界面 。 





在 CSS 3 中 ， 还 有 一 种 伪 元 素 选 择 器 ， 它 并 不 是 针对 真正 的 元 素 使 用 的 选择 器 ， 而 是 针对 CSS 
已 经 定义 好 的 伪 元 素 使 用 的 选择 器 。 
CSS 伪 元 素 选择 器 的 说 明 如 表 9-7 所 示 。 


表 9-7 CSS 伪 元 素 选择 器 的 说 明 
| 并 
人 
和 


Be 设置 在 对 象 前 ( 依据 对 象 树 的 逻辑 结构 ) 发 生 的 内 容 ， 用 来 和 content 属性 一 起 

使 用 

1 设置 在 对 象 后 ( 依据 对 象 树 的 逻辑 结构 ) 发 生 的 内 容 ， 用 来 和 content 属性 一 起 
使 用 


[ESASCIOnI 上 设置 对 象 被 选中 时 的 关 色 


在 网 页 中 使 用 伪 元 素 选择 器 
最 终 文 件 : 光盘 \ 最 终 文件 \ 第 9 章 \9-4-4.html 。 视频 : 光盘 \ 视 频 \ 第 9 章 \9-4-4.mp4 





[GE 执行 “文件 > 打开 "命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 9 章 \9-4-4.html”, 可 以 看 到 页 面 效果 ， 
如 图 9-38 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 界面 代码 ， 如 图 9-39 所 示 。 
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Fbody> 


ldiv 1d="box"> 
<div 1d="text"> 
<UL> 
<1i dc="Apple">Apple 苹 果 (pingguo) </1i> 
<1i dc="Apricot">Apricot: 和 ng </Ui> 
<1i dc="Arbutus">Arbutus: 杨梅 (yangmei) </11> 
<1i dc="Banana">Banana: 香 基 《xiangjiao) </1i> 
<1i dc="Blueberry">Blueberry: 蓝 萄 (lanme1) </1i| 
<1i dc="Cumquat">Cumquat: 金村 (jinju》</1U1> 


<1i dc="Durian">Durian: 榴莲 (Liutian) </1i 
柠檬 (ningmeng) </11> 











<Ui dc="Lemon">Lemon: 
ss </U> 
</ub 
</div> 
<div 1d="enter"><a href="images/94103.jpg"> 
<p> 进 入 儿童 英语 网 站 </p></a></div> 
L 3 /div> 
月 而 夯 了 is 可 /body> 
图 9-39 

















Py 


图 9-38 
E@ 权 ”转换 到 外 部 CSS 样式 表 文 件 中 ， 创 建 伪 元 素 选择 器 ， 如 图 9-40 所 示 。 返 回 设计 视图 中 ， 


可 以 看 到 段落 首 字符 发 生变 化 ， 如 图 9-41 所 示 。 


Ena mp 
/* 大 山 囊 一 1 子 *] 


p:fi rst- letter { 
font-size:18px; 
font-weight:bold;| 
昌 

图 9-40 图 9-41 
[Ga 本 ”转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 伪 元 素 选 择 器 ， 如 图 9-42 所 示 。 保 存 页 面 并 保存 外 
部 CSS 样式 表 文 件 , 在 Firefox 浏览 器 中 预览 页 面 , 可 以 看 到 链接 文字 前 添加 的 图 片 效 果 , 如 图 9-43 




















所 示 。 














/< 种 绥 前 加 图 片 */ 
la[href$=jpg]::before { 
content:url(../images/94401.png) | 








图 9-43 








} 
图 9-42 


由 此 可 以 看 出 ， 链 接 前 面 的 图 片 也 可 以 通过 伪 元 素 before 来 实现 ， 首 个 字符 的 
设置 也 可 以 使 用 伪 元 素 first-letter 来 实现 ， 其 他 伪 元 素 的 使 用 方法 是 一 致 的 。 
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CSS 样式 能 够 很 好 地 控制 页 面 的 显示 ， 以 分 离 网 页 内 容 和 样式 代码 。CSS 样式 可 以 用 来 改变 从 
文本 样式 到 页 面 布 局 的 一 切 ， 并 且 能 够 与 JavaScript 结合 产生 动态 显示 效果 。 


在 网 页 中 应 用 CSS 样式 表 有 4 种 方式 : 内 联 CSS 样式 、 内 部 CSS 样式 、 链 接 外 部 CSS 样式 
表 文 件 和 导入 外 部 CSS 样式 表 文 件 。 
》1. 内 联 CSS 样式 

内 联 CSS 样式 是 所 有 CSS 样式 中 比较 简单 和 直观 的 方法 ， 就 是 直接 把 CSS 样式 代码 添加 到 
HTML 的 标签 中 ， 即 作为 HTML 标签 的 属性 存在 。 通 过 这 种 方法 ， 可 以 很 简单 地 对 某 个 元 素 单独 定 
义 样式 。 

使 用 内 联 样式 方法 是 直接 在 HTML 标签 中 使 用 style 属性 , 该 属性 的 内 容 就 是 CSS 的 属性 和 值 ， 
其 应 用 格式 如 下 。 


<p style="font-family: 宋体 ; font-size: 2DXACOILOEEEECEEE> 内 联 样式 </p> 


内 联 CSS 样式 由 HTML 文件 中 元 素 的 style 属性 所 支持 ， 只 需要 将 CSS 代码 用 “;” 分 号 隔 开 
输入 在 style=“ ”中 ， 便 可 以 完成 对 当前 标签 的 样式 定义 ， 是 CSS 样式 定义 的 一 种 基本 形式 。 


内 联 CSS 样式 仅仅 是 HTML 标签 对 于 style 属性 的 支持 所 产生 的 一 种 CSS 样 
式 表 编 写 方式 ， 并 不 符合 表现 与 内 容 分 离 的 设计 模式 ， 采 用 内 联 CSS 样式 与 表格 布 
局 从 代码 结构 上 来 说 完全 相同 ， 仅 仅 利用 了 CSS 对 元 素 的 精确 控制 优势 ， 并 没有 很 
好 地 实现 表现 与 内 容 的 分 离 ， 所 以 这 种 书写 方式 应 当 尽量 少 用 。 


》2. 内 部 CSS 样式 

内 部 CSS 样式 就 是 将 CSS 样式 代码 添加 到 <head> 与 </head> 标签 之 间 ， 并 且 用 <style> 
与 </style> 标签 进行 声明 。 这 种 写法 虽然 没有 完全 实现 页 面 内 容 与 CSS 样式 表现 的 完全 分 离 ， 但 可 
以 将 内 容 与 HTML 代码 分 离 在 两 个 部 分 进行 统一 的 管理 。 代 码 如 下 。 


<html> 

<head> 

<title> 内 部 样式 表 </title> 

<style type="text/css"> 

body{ 
font-family: "宋体 "; 
font-size: 12px; 
color: #333333; 

. 

</style> 

</head> 

<body> 


@1 





内 部 css 样式 
</body> 
</html> 


内 部 CSS 样式 是 CSS 样式 的 初级 应 用 形式 ， 它 只 针对 当前 页 面 有 效 ， 不 能 跨 页 面 执行 ， 因 此 
达 不 到 CSS 代码 多 用 的 目的 ， 在 实际 的 大 型 网 站 开发 中 ， 很 少 会 用 到 内 部 CSS 样式 。 





在 内 部 CSS 样式 中 ， 所 有 的 CSS 代码 都 编写 在 <style> 与 <style> 标签 之 间 , 方便 
了 后 期 对 页 面 的 维护 ， 页 面相 对 于 内 部 CSS 样式 的 方式 大 大 瘦身 了 。 但 是 如 果 一 个 网 站 
拥有 很 多 页 面 ， 对 于 不 同 页 面 中 的 <p> 标签 都 希望 采用 同样 的 CSS 样式 设置 时 ， 内 部 
CSS 样式 的 方法 都 显得 有 点 麻烦 了 。 该 方法 只 适合 于 单一 页 面 设置 单独 的 CSS 样式 。 


》3. 链接 外 部 CSS 样式 表 文件 

外 部 CSS 样式 表 文件 是 CSS 样式 中 较为 理想 的 一 种 形式 。 将 CSS 样式 代码 单独 编写 在 一 个 
独立 文件 之 中 ， 由 网 页 进行 调用 ， 多 个 网 页 可 以 调用 同一 个 外 部 CSS 样式 表 文 件 ， 因 此 能 够 实现 代 
码 的 最 大 化 重用 及 网 站 文件 的 最 优化 配置 。 

链接 外 部 CSS 样式 是 指 在 外 部 定义 CSS 样式 并 形成 以 .css 为 扩展 名 的 文件 ， 在 网 页 中 通 
过 <link> 标签 将 外 部 的 CSS 样式 文件 链接 到 网 页 中 ， 而 且 该 语句 必须 放 在 页 面 的 <head> 与 </ 
head> 标签 之 间 ， 其 语法 格式 如 下 。 


<link rel="stylesheet" type="text/css" href="CSSs 样式 表 文件 "> 


类 型 为 CSS 样式 表 ，href 属性 指定 所 定义 链接 的 外 部 CSS 样式 文件 的 路 径 ， 可 以 


rel 属性 指定 链接 到 CSS 样式 ， 其 值 为 stylesheet，type 属性 指定 链接 的 文件 
使 用 相对 路 径 和 绝对 路 径 。 


推荐 使 用 链接 外 部 CSS 样式 文件 的 方式 在 网 页 中 应 用 CSS 样式 ， 其 优势 主要 有 : 
1. 独立 于 HTML 文件 ， 便 于 修改 ; 2. 多 个 文件 可 以 引用 同一 个 CSS 样式 文件 ; 3.CSS 
样式 文件 只 需要 下 载 一 次 ， 就 可 以 在 其 他 链接 了 该 文件 的 页 面 内 使 用 ;4. 浏览 器 会 先 显示 

HTML 内 容 ， 然 后 再 根据 CSS 样式 文件 进行 泻 染 ， 从 而 使 访问 者 可 以 更 快 地 看 到 内 容 。 


了》4. 导入 外 部 CSS 样式 表 文件 

导入 外 部 CSS 样式 表 文件 与 链接 外 部 CSS 样式 表 文 件 基本 相同 ， 都 是 创建 一 个 独立 的 CSS 样 
式 表 文件 ， 然 后 再 引入 到 HTML 文件 中 ， 只 不 过 在 语法 和 运作 方式 上 有 所 区 别 。 采 用 导入 的 CSS 样 
式 , 在 HTML 文件 初始 化 时 , 会 被 导入 到 HTML 文件 内 , 成 为 文件 的 一 部 分 ， 类似 于 内 部 CSS 样式 。 
链接 CSS 样式 表 是 在 HTML 标签 需要 CSS 样式 风格 时 才 以 链接 方式 引入 。 

导入 的 外 部 CSS 样式 表 文 件 是 指 在 嵌入 样式 的 <style> 与 </style> 标签 中 ， 使 用 @import 命 
令 导 入 一 个 外 部 CSS 样式 表 文件 。 
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导入 外 部 CSS 样式 与 链接 外 部 CSS 样式 相 比较 ， 最 大 的 优点 就 是 可 以 一 次 导 

入 多 个 外 部 CSS 样式 文件 。 导 入 外 部 CSS 样式 文件 相当 于 将 CSS 样式 文件 导入 
到 内 部 CSS 样式 中 ， 其 方式 更 有 优势 。 导 入 外 部 CSS 样式 文件 必须 在 内 部 CSS 
样式 开始 部 分 ， 即 其 他 内 部 CSS 样式 代码 之 前 。 


创建 并 链接 外 部 CSS 样式 表 文件 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 9 章 \9-5-1.html 。 视频 : 光盘 \ 视 频 \ 第 9 章 \9-5-1.mp4 


ES 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 9 章 \9-5-1.html”, 可 以 看 到 页 面 效 果 ， 
如 图 9-44 所 示 。 执行 “文件 > 新 建 ”命令 , 新 建 一 个 CSS 样式 表 文件 , 并 保存 名 为 “光盘 \ 源 文件 \ 第 
9 章 \style\9-5-1.css” 文 件 ， 如 图 9-45 所 示 。 


i 


, -中 


rn 














图 9-44 图 9-45 


国 3 开 ”返回 页 面 的 设计 视图 中 ， 打 开 “CSS 设计 器 ”面板 ， 单 击 “ 源 ”选项 中 的 “附加 现 有 的 
CSS 文件 ”按钮 ， 在 弹出 菜单 中 选择 “附加 现 有 的 CSS 文件 ”选项 ， 如 图 9-46 所 示 。 弹 出 “使 
用 现 有 的 CSS 文件 ”对 话 框 , 单 击 “浏览 ”按钮 ， 选 择 需 要 链接 的 外 部 CSS 样式 文件 , 如 图 9-47 
所 示 。 








使 用 现 有 的 CSS 文件 



















/RF [SS 3 


为 ; 已 名册 

Oo 
ESR ， 有 条 件 使 用 (可 先 ) 
附加 现 有 的 css 文件 人 一 


页 面 中 定义 一 















































图 9-46 图 9-47 


3 轴 ” 单 击 “确定 ”按钮 ， 链 接 刚 创建 的 外 部 CSS 样式 表 文 件 ， 转 换 到 代码 视图 中 ， 可 以 看 见 刚 
链接 外 部 样式 表 文 件 的 html 代码 ， 如 图 9-48 所 示 。 转 换 到 外 部 样式 表 文件 中 ， 创 建 通 配 选 择 器 * 
和 body 标签 选择 器 的 CSS 样式 ， 如 图 9-49 所 示 。 


G1s 








margin: 6px; 

padding: Opx; 
日 
lbody { 
font-family: 微软 雅 黑 ; 
font-size: 14px; 
color: #FFF; 























ee a Line-height: 36px; 
meta charset="u font-weight: bold; 
sat /tne; ke 
link href="style/9-5-1.css" rel="stylesheet" type= background-image: url(../images/95101.jpg)! 
"text/css"> background-repeat: repeat-x; 
ead> 日 
图 9-48 图 9-49 
CSS 样式 在 页 面 中 的 应 用 主要 目的 在 于 实现 良好 的 网 站 文件 管理 及 样式 管理 ， 
分 离 式 的 结构 有 助 于 合理 分 配 表现 与 内 容 。 











区 ”返回 设计 视图 中 ， 可 以 看 到 页 面 效果 ， 如 图 9-50 所 示 。 转 换 到 外 部 样式 表 文 件 中 ， 创 建 名 
为 #box 的 CSS 样式 ， 如 图 9-51 所 示 。 





Bbox 也 
width: 853px; 
height: auto; 
overflow: hidden; 
margin: 9px auto; 
padding-top: 40px; 
text-align: center;| 











图 9-50 图 9-51 


E 返回 设计 视图 中 ， 可 以 看 到 页 面 效果 ， 如 图 9-52 所 示 。 转 换 到 外 部 样式 表 文件 中 ， 创 建 名 
为 .font01 的 类 CSS 样式 ， 如 图 9-53 所 示 。 








fontg1l { 
font-size: 28px; 
color: #1FABBA; 
line-height: 690px; 











图 9-52 图 9-53 


[ 驮 国运 回 设计 页 面 中 , 选中 页 面 中 相应 的 文字 , 应 用 刚 定义 的 名 为 font01 的 类 CSS 样 式 , 如 图 9-54 
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所 示 。 保存 页 面 并 保存 外 部 CSS 样式 表 文 件 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 页 面 的 效果 , 如 图 9-55 
所 示 。 





Welcome>> 





P|] BI 汪 二 汪汪 标题 0) 
| 7 9 局 有 名 





图 9-54 图 9-55 





CSS 通过 与 HTML 的 文档 结构 相对 应 的 选择 器 来 达到 控制 页 面 表现 的 目的 ， 在 CSS 样式 的 应 
用 过 程 中 ， 还 需要 注意 CSS 样式 的 一 些 特 性 ， 包 括 继承 性 、 特 殊 性 、 层 医 性 和 重要 性 。 
了 》1. 继承 性 

在 CSS 语言 中 继承 并 不 那么 复杂 ， 简 单 地 说 就 是 将 各 个 HTML 标签 看 作 一 个 个 大 容器 ， 其 中 被 
包含 的 小 容器 会 继承 所 包含 它 的 大 容器 的 风格 样式 。 子 标签 还 可 以 在 父 标签 样式 风格 的 基础 上 再 加 以 
修改 ， 产 生 新 的 样式 ， 而 子 标签 的 样式 风格 完全 不 会 影响 父 标签 。 
》2. 特殊 性 

特殊 性 规定 了 不 同 的 CSS 规则 的 权重 ， 当 多 个 规则 都 应 用 在 同一 元 素 时 ， 权 重 越 高 的 CSS 样 
式 会 被 优先 采用 ， 例 如 ， 下 面 的 CSS 样式 设置 。 


.fontOol { 
color: red; 
} 

Pi 

color: blue; 


<p class="font01"> 内 容 </p> 


那么 ，<p> 标签 中 的 文字 颜色 究竟 应 该 是 什么 颜色 ? 根据 规范 ， 标 签 选择 器 ( 例如 <p> ) 具有 
特殊 性 1， 而 类 选择 器 具有 特殊 性 10，id 选择 器 具有 特殊 性 100。 因 此 ， 此 例 中 p 中 的 颜色 应 该 为 
红色 。 而 继承 的 属性 ， 具 有 特殊 性 0， 因 此 后 面 任何 的 定义 都 会 覆盖 掉 元 素 继承 来 的 样式 。 
特殊 性 还 可 以 到 加 ， 例 如 下 面 的 CSS 样式 设置 。 





@1s0 


color: blue; /* 特殊 性 =1*/ 
} 
pit 
color: yellow; /* 特殊 性 =2*/ 
} 
.font0l{ 
color: red; /* 特殊 性 =10*/ 
} 
#main { 
color: black; /* 特殊 性 =100*/ 


} 


当 多 个 CSS 样式 都 可 应 用 同一 元 素 时 ， 权 重 越 高 的 CSS 样式 会 被 优先 采用 。 
》3. 层 要 性 

层 芭 就 是 指 在 同一 个 网 页 中 可 以 有 多 个 CSS 样式 的 存在 ， 当 拥有 相同 特殊 性 的 CSS 样式 应 
用 在 同一 个 元 素 时 ， 根 据 前 后 顺序 ， 后 定义 的 CSS 样式 会 被 应 用 ， 它 是 W3C 组 织 批准 的 一 个 辅 
助 HTML 设计 的 新 特性 ， 它 能 够 保持 整个 HTML 的 统一 外 观 ， 可 以 由 设计 者 在 设置 文本 之 前 ， 就 
指定 整个 文本 的 属性 ， 例 如 颜色 、 字 体 大 小 等 ，CSS 样式 为 设计 和 制作 网 页 带 来 了 很 大 的 灵活 性 。 

由 此 可 以 推出 一 般 情 况 下 , 内 联 CSS 样式 ( 写 在 标签 内 的 ) > 内 部 CSS 样式 ( 写 在 文档 头 部 的 ) 
> 外 部 CSS 样式 ( 写 在 外 部 样式 表 文 件 中 的 ) 。 
》4. 重要 性 

不 同 的 CSS 样式 具有 不 同 的 权重 , 对 于 同一 元 素 , 后 定义 的 CSS 样式 会 替代 先 定义 的 CSS 样式 ， 
但 有 时 候 制作 者 需要 某 个 CSS 样式 拥有 最 高 的 权重 ， 此 时 就 需要 标 出 此 CSS 样式 为 “重要 规则 ”， 
例如 下 面 的 CSS 样式 设置 。 


.EontoOl { 

color: red; 

} 

Pi 

color: blue; !important 

1 

<p class="font01"> 内 容 </p> 


此 时 ，<p> 标签 CSS 样式 中 的 color: blue 将 具有 最 高 权重 ，<p> 标签 中 的 文字 颜色 就 为 蓝 色 。 
当 制 作者 不 指定 CSS 样式 的 时 候 ， 浏 览 器 也 可 以 按照 一 定 的 样式 显示 出 HTML 文档 ， 这 时 浏览 
器 使 用 自身 内 定 的 样式 来 显示 文档 。 同 时 ， 访 问 者 还 有 可 能 设 定 自己 的 样式 表 ， 例 如 视力 不 好 的 访问 
会 希望 页 面 内 的 文字 显示 得 大 一 些 ， 因 此 设 定 一 个 属于 自己 的 样式 表 保存 在 本 机 内 。 此 时 ， 浏 览 器 
的 样式 表 权重 最 低 ， 制 作者 的 样式 表 会 取代 浏览 器 的 样式 表 来 泻 染 页 面 ， 而 访问 者 的 样式 表 则 会 优先 
于 制作 者 的 样式 定义 。 
而 用 “!important” 声 明 的 规则 将 高 于 访问 者 本 地 样式 的 定义 ， 因 此 需要 谨慎 使 用 。 
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CSS 样式 是 网 页 设计 制作 的 必 备 技能 ， 本 章 主要 介绍 了 有 关 CSS 样式 的 基础 知识 ， 包 括 CSS 
样式 的 版 本 、CSS 样式 语法 、CSS 选择 器 和 在 网 页 中 应 用 CSS 样式 的 方式 等 内 容 。 通过 本 章 的 学 习 ， 
使 读者 对 CSS 样式 的 理解 更 加 深入 ， 以 便 熟 练 地 掌握 并 使 用 CSS 样式 。 
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第 10 章 文字 与 背 S a css$ 


属性 的 设置 方法 
YW 理解 并 掌握 CSS 3 新 增 的 文 
文字 作为 传递 信息 的 主要 手段 ， 一 直 都 是 网 页 中 必 不 可 少 本 控制 属性 的 设置 和 使 用 方法 
的 一 个 元 素 ， 背 景 也 是 网 页 中 非常 重要 的 元 素 之 一 。 使 用 CSS W 掌握 列表 样式 CSS 属性 的 设 
样式 可 以 轻松 地 控制 网 页 的 文字 、 背 景 图 像 和 背景 颜色 ， 本 章 置 方法 
将 详细 介绍 如 何 使 用 CSS 样式 设置 网 页 的 文字 和 背景 元 素 ， 并 掌握 背景 样式 CSS 属性 的 设 
且 还 将 介绍 CSS 3 中 新 增 的 文本 和 背景 的 相关 控制 属性 。 置 方法 
VY 理解 并 掌握 CSS 3 新 增 的 颜 
色 设 置 方式 
YY 理解 并 掌握 CSS 3 新 增 的 背景 
设置 属性 的 设置 和 使 用 方法 


OO 








在 制作 网 站 页 面 时 , 可 以 通过 CSS 控制 文字 样式 , 对 文字 的 字体 大小、 颜色 粗细、 斜体 ,下划线 、 
顶 划 线 和 删除 线 等 属性 进行 设置 。 使 用 CSS 控制 文字 样式 的 最 大 好 处 是 ， 可 以 同时 为 多 段 文字 赋予 
同一 CSS 样式 ， 在 修改 时 只 需 修改 某 一 个 CSS 样式 ， 即 可 同时 修改 应 用 该 CSS 样式 的 所 有 文字 。 


在 HTML 中 提供 了 字体 样式 设置 的 功能 ， 在 HTML 语言 中 文字 样式 是 通过 <font face=" 字体 
名 称 "> 来 设置 的 ， 而 在 CSS 样式 中 则 是 通过 font-family 属性 来 进行 设置 的 。font-family 属性 的 
语法 格式 如 下 。 















































font-family: namel,name2name3… /7 


通过 font-family 属性 的 语法 格式 可 以 看 出 , 可 以 为 font-family 属性 定义 多 个 字体 , 按 优先 顺序 ， 
逗号 卫 开 ， 当 系统 中 没有 第 一 种 字体 时 会 自动 应 用 第 二 种 字体 ， 以 此 类 推 。 需 要 注意 的 是 如 果 字 体 
名 称 中 包含 空格 ， 则 字体 名 称 需 要 用 双 引 号 括 起 来 。 


在 网 页 应 用 中 ， 字 体 大 小 的 区 别 可 以 起 到 突出 网 站 主题 的 作用 。 字 体 大 小 可 以 是 相对 大 小 也 可 以 





























































































































是 绝对 大 小 。 在 CSS 样式 中 ， 可 以 通过 设置 font-size 属性 来 控制 字体 的 大 小 。font-size 属性 的 
基本 语法 如 下 。 


font-size: 字体 大 小 ; 


在 设置 字体 大 小 时 ， 可 以 使 用 绝对 大 小 单位 ， 也 可 以 使 用 相对 大 小 单位 。 
在 CSS 样式 中 ， 绝 对 单位 用 于 设置 绝对 值 ， 主 要 有 5 种 绝对 单位 ， 如 表 10-1 所 示 。 


表 10-1 CSS 样式 中 的 绝对 单位 
in( 英寸 ) 是 国外 常用 的 量度 单位 , 对 于 国内 设计 而 言 , 使 用 较 少 。1in( 英寸 ) 等 于 2.54cm( 厚 
米 )， 而 1cm (厘米 ) 等 于 0.394in (英寸 ) 

cm ( 厘米 ) 是 常用 的 长 度 单位 。 它 可 以 用 来 设 定 距 离 比较 大 的 页 面 元 素 框 

mm ( 毫米 ) 可 以 用 来 精确 地 设 定 页 面 元 素 距离 或 大 小 。10mm ( 毫米 ) 等 于 1cm ( 厘米 ) 
pt ( 磅 ) 是 标准 的 印刷 量度 ， 一 般 用 来 设 定 文字 的 大 小 。 它 广泛 应 用 于 打印 机 、 文 字 程 序 等 。 
72pt ( 磅 ) 等 于 1in (英寸 ) ， 也 就 是 等 于 2.54cm ( 厘米 ) 。 另 外 ，in (英寸 ) 、cm ( 厘 
米 ) 和 mm ( 毫米 ) 也 可 以 用 来 设 定 文字 的 大 小 

[EUDRA JI pc ( 派 卡 ) 是 另 一 种 印刷 量度 ，1pc ( 派 卡 ) 等 于 12pt ( 磅 ) ， 该 单位 并 不 经 常 使 用 






相对 单位 是 指 在 度量 时 需要 参照 其 他 页 面 元 素 的 单位 值 。 使 用 相对 单位 所 度量 的 实际 距离 可 能 会 
随 着 这 些 单位 值 的 变化 而 变化 。CSS 样式 中 提供 了 3 种 相对 单位 ， 说 明 如 表 10-2 所 示 。 


表 10-2 CSS 样式 中 的 相对 单位 

说 明 
em 用 于 给 定 字体 的 font-size 值 。1em 总 是 字体 的 大 小 值 ， 它 随 着 字体 大 小 的 变化 而 
变化 ， 如 一 个 元 素 的 字体 大 小 为 12pt， 那 么 1em 就 是 12pt; 若 该 元 素 字 体 大 小 改 为 
15pt， 则 1em 就 是 15pt 
ex 是 以 给 定 字体 的 小 写字 母 “x” 高 度 作为 基准 ， 对 于 不 同 的 字体 来 说 ， 小 写字 母 “x” 
高 度 是 不 同 的 ， 因 而 ，ex 的 基准 也 不 同 
px 也 叫 像素 ， 是 目前 广泛 应 用 的 一 种 量度 单位 ，1px 就 是 屏幕 上 的 一 个 小 方 格 ， 这 个 通 
常 是 看 不 出 来 的 ， 由 于 显示 器 的 大 小 不 同 ， 它 的 每 个 小 方 格 是 有 所 差异 的 ， 因 而 ， 以 像 
素 为 单位 的 基准 也 是 不 同 的 













在 HTML 页 面 中 ， 通 常 在 页 面 的 标题 部 分 或 者 需要 浏览 者 注意 的 部 分 使 用 不 同 的 颜色 ， 使 其 与 
其 他 文字 有 所 区 别 ， 从 而 能 够 吸引 浏览 者 的 注意 。 在 CSS 样式 中 ， 文 字 的 颜色 是 通过 color 属性 进 
行 设置 的 。color 属性 的 基本 语法 如 下 。 


Colo: 颜色 值 全 


在 CSS 样式 中 颜色 值 的 表示 方法 有 多 种 ， 可 以 使 用 颜色 英文 名 称 、RGB 和 HEX 等 多 种 方式 设 
置 颜色 值 。 


设置 网 页 文字 基本 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-1-3.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-1-3.mp4 


[GE 执行 “文件 > 打开” 命令， 打开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-1-3.html”， 可 以 看 到 
页 面 效 果 , 如 图 10-1 所 示 。 转 换 到 该 网 页 链接 的 外 部 样式 表 文 件 中 , 创建 名 为 .font01 的 类 CSS 样式 ， 
如 图 10-2 所 示 。 
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font6I { 
font-family: 微软 雅 黑 ] 
font-size: 30px; 
color: #FFF; 








图 10-1 图 10-2 


此 处 设置 字体 、 字 体 大 小 和 字体 颜色 。 在 默认 情况 下， 中文 操作 系统 中 默认 的 
中 文字 体 有 宋体 、 黑 体 、 幼 圆 和 微软 雅 黑 ， 其 他 的 字体 都 不 是 系统 默认 支持 的 字体 。 
在 网 页 中 ， 默 认 的 颜色 表现 方式 是 十 六 进 制 的 表现 方式 ， 如 #000000， 以 # 号 开头 ， 
前 面 两 位 代表 红色 的 分 量 ， 中 间 两 位 代表 绿色 的 分 量 ， 最 后 两 位 代表 蓝 色 的 分 量 。 





页 ”返回 设计 界面 中 ， 选 中 页 面 中 相应 的 文字 ， 在 “类 ”下 拉 列 表 中 选择 刚 定义 的 CSS 样式 
font01 应 用 , 如 图 10-3 所 示 。 完 成 类 CSS 样式 的 应 用 后 , 可 以 看 到 页 面 中 字体 的 效果 , 如 图 10-4 所 示 。 
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IN 





图 10-4 


葬 畏 ”转换 到 外 部 样式 表 文件 中 ， 创 建 名 为 .font02 的 类 CSS 样式 ， 如 图 10-5 所 示 。 返 回 设计 
视图 中 , 选中 相应 的 文字 , 在 “类 ”下 拉 列 表 中 选择 刚 定义 的 CSS 样式 font02 应 用 , 如 图 10-6 所 示 。 
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font62 { 
font-family: 幼 圆 ; 
font-size: 16px; 
color: #FCQ; 











图 10-5 


区 完成 类 CSS 样式 的 应 用 后 ， 可 以 看 到 文字 的 效果 ， 如 图 10-7 所 示 。 保 存 页 面 并 保存 外 部 
CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 10-8 所 示 。 
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图 10-7 





在 HTML 页 面 中 ， 将 字体 加 粗 或 是 变 细 是 吸引 浏览 者 注意 的 另 一 种 方式 ， 同 时 还 可 以 使 网 页 的 
表现 形式 更 加 多 样 。 在 CSS 样式 中 通过 font-weight 属性 对 字体 的 粗细 进行 控制 。 定 义 字体 粗细 
font-weight 属性 的 基本 语法 如 下 。 


font-weight: normal | bold | bolder | lighter | inherit | 100~900; 


font-weight 属性 的 属性 值 说 明 如 表 10-3 所 示 。 


表 10-3 font-weight 属性 的 属性 值 说 明 
说 明 

[CAAna 该 属性 值 设置 字体 为 正常 的 字体 ， 相 当 于 参数 为 400 
6 该 属性 值 设置 字体 为 粗 体 ， 相 当 于 参数 为 700 
[EGG 该 属性 值 设置 的 字体 为 特 查 体 
[Ser 该 属性 值 设置 的 字体 为 细 体 
而 i 本 时 该 属性 设置 字体 的 粗细 为 继承 上 级 元 素 的 font-weight 属性 设置 
[ooso00 font-weight 属 性 值 还 可 以 通过 100~900 之 间 的 数值 来 设置 字体 的 粗细 
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使 用 font-weight 属性 设置 网 页 中 文字 的 粗细 时 ， 将 该 属性 设置 为 bold 和 
bolder， 对 于 中 文字 体 而 言 ， 在 视觉 效果 上 几乎 是 一 样 的 ， 没 有 什么 区 别 ， 但 对 于 
部 分 英文 字体 会 有 区 别 。 





所 谓 字体 样式 ， 也 就 是 平常 所 说 的 字体 风格 ， 在 Dreamweaver 中 有 3 种 不 同 的 字体 样式 ， 分 
别 是 正常 、 斜 体 和 偏 斜 体 。 在 CSS 中 ， 字 体 的 样式 是 通过 font-style 属性 进行 定义 的 。 定 义 字体 样 
式 font-style 属性 的 基本 语法 如 下 。 


font-style: normal | italic | oblique; 
font-style 属性 的 属性 值 说 明 如 表 10-4 所 示 。 
表 10-4 font-style 属性 的 属性 值 说 明 


站 而 恒信 | 说 ” 阴 
[Gmail 该 属性 值 是 默认 值 ， 显 示 的 是 标准 字体 样式 
[SC 设置 font-weight 属性 为 该 属性 值 ， 则 显示 的 是 斜体 的 字体 样式 
[EGGUGULLLL 设置 font-weight 属性 为 该 属性 值 ， 则 显示 的 是 倾斜 的 字体 样式 


设置 网 页 文字 的 加 粗 和 倾斜 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-1-5.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-1-5.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-1-5.html”， 可 以 看 到 
页 面 效果 , 如 图 10-9 所 示 。 转 换 到 该 网 页 链接 的 外 部 样式 表 文 件 中 , 找到 名 为 .font01 的 类 CSS 样式 ， 
如 图 10-10 所 示 。 
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font6I + 
font-family: 微软 雅 黑 ; 
font-size: 36px; 
color: #FFF; 











图 10-9 图 10-10 


呈 E 在 .font01 的 类 CSS 样式 中 添加 font-weight 属性 设置 代码 ， 如 图 10-11 所 示 。 返 回 设计 
界面 ， 可 以 看 到 应 用 了 该 类 CSS 样式 的 文字 会 显示 为 加 粗 的 效果 ， 如 图 10-12 所 示 。 
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.font@l { 
font-family: 微软 雅 黑 | 
font-size: 30px; 
color: #FFF; 
font-weight: bold; 











图 10-11 图 10-12 


国 畏 ”转换 到 外 部 样式 表 文 件 中 ， 找 到 名 为 .font02 的 类 CSS 样式 ,添加 font-style 属性 设置 代 
码 ， 如 图 10-13 所 示 。 返 回 设计 界面 ， 可 以 看 到 应 用 了 该 类 CSS 样式 的 文字 会 显示 为 斜体 效果 ， 如 
10-14 所 示 。 
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.fonte2 { 
font-family: 功 圆 ; 
font-size: 16px; 
color: #FCO; 
font-style: italic; 





图 10-13 图 10-14 


国保 存 页 面 并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 效 果 ， 如 图 10-15 
所 示 。 
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图 10-15 





斜体 是 指 斜 体 字 ， 也 可 以 理解 为 使 用 文字 的 斜体 ; 偏 斜体 可 以 理解 为 强制 文字 
进行 斜体 ， 并 不 是 所 有 的 文字 都 具有 和 斜体 属性 ， 一 般 只 有 英文 才 具 有 这 个 属性 ， 如 
果 想 对 一 些 不 具备 斜体 属性 的 文字 进行 斜体 设置 ， 则 需要 通过 设置 偏 斜体 强行 对 其 
进行 斜体 设置 。 
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text-transform 属性 可 以 实现 转换 页 面 中 英文 字体 的 大 小 写 格式 ， 是 非常 实用 的 功能 之 一 。 
text-transform 属性 的 基本 语法 如 下 。 


text-transform: capitalize | uppercase | lowercase; 


text-transform 属性 的 属性 值 说 明 如 表 10-5 所 示 。 
表 10-5 text-transform 属性 的 属性 值 说 明 


属性 值 | 说 ”了 明 
[riai 帮 于 时 该 属性 值 表示 单词 首 字母 大 写 
[ESTC5SCULLLLLLLL 该 层 性 值 表示 单词 所 有 字母 全 部 大 写 
ia 于 引 和 该 属性 值 表示 单词 所 有 字母 全 部 小 写 


设置 网 页 中 英文 字体 大 小 写 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-1-6.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-1-6.mp4 


ES 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-1-6.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-16 所 示 。 转 换 到 该 网 页 链接 的 外 部 样式 表 文 件 中 ， 创 建 名 为 .font01 的 类 CSS 
样式 ， 如 图 10-17 所 示 。 








fontoit 
text-transform: Lowercase! 








图 10-16 图 10-17 


[到 返回 设计 页 面 中 ， 选 择 页 面 中 相应 的 文字 ， 在 “类 ”下 拉 列 表 中 选择 刚 定义 的 类 CSS 样式 
font01 应 用 ， 如 图 10-18 所 示 。 完 成 类 CSS 样式 的 应 用 后 ， 可 以 看 到 应 用 该 类 CSS 样式 的 英文 
字母 全 部 小 写 ， 如 图 10-19 所 示 。 





图 10-19 
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E 国 ”转换 到 外 部 样式 表 文 件 中 ， 创 建 名 为 font02 的 类 CSS 样式 ， 如 图 10-20 所 示 。 返 回 设计 
页 面 中 ， 为 相应 的 文字 应 用 名 为 font02 的 类 CSS 样式 ， 可 以 看 到 英文 单词 首 字母 大 写 效果 ， 如 
10-21 所 示 。 





font62 { 
text-transform: capitaLjizel 








图 10-20 图 10-21 


转换 到 外 部 样式 表 文件 中 ， 创 建 名 为 .font03 的 类 CSS 样式 ， 如 图 10-22 所 示 。 返 回 设 
计 页 面 中 ， 为 相应 的 文字 应 用 名 为 font03 的 类 CSS 样式 ， 可 以 看 到 所 有 英文 字母 大 写 的 效果 ， 如 
10-23 所 示 。 





font093 { 
text-transform: uppercase; 








图 10-22 图 10-23 


在 CSS 样式 中 ， 设 置 text-transform 属性 值 为 capitalize， 便 可 定义 英文 单 
词 的 首 字母 大 写 。 但 是 需要 注意 的 是 ， 如 果 单词 之 间 有 去 号 和 句号 等 标点 符号 隔 开 ， 
| 那么 标点 符号 后 的 英文 单词 便 不 能 实现 首 字母 大 写 的 效果 ， 解 决 的 办 法 是 ， 在 该 单 
词 前 面 加 上 一 个 空格 ， 便 能 实现 首 字母 大 写 的 样式 。 


在 网 站 页 面 的 设计 中 ， 为 文字 添加 下 划 线 、 顶 划 线 和 删除 线 是 美化 和 装饰 网 页 的 一 种 方法 。 在 
CSS 样式 中 ， 可 以 通过 text-decoration 属性 来 实现 这 些 效果 。text-decoration 属性 的 基本 语法 
如 下 。 


text-decoration: underline | overline | line-through; 


text-decoration 属性 的 属性 值 说 明 如 表 10-6 所 示 。 
表 10-6 text-decoration 属性 的 属性 值 说 明 
| 属性 信 | 说 明 
[aerine 该 属性 值 可 以 为 文字 添加 下 划 线 效果 
[GAS i 访 属性 值 可 以 为 文字 添加 项 划 线 效果 


硬 二 "6065 时 时 该 属性 值 可 以 为 文字 添加 删除 线 效果 


@10 


为 网 页 文字 添加 修饰 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-1-7.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-1-7.mp4 


[GE 执行 “文件 > 打开” 命令， 打开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-1-7.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-24 所 示 。 转 换 到 该 网 页 链接 的 外 部 样式 表 文件 中 ， 创 建 名 为 .font01 的 类 CSS 





text-decoration:underline 





| et 





图 10-24 图 10-25 


吨 醒 ”返回 设计 页 面 中 ， 为 相应 的 文字 应 用 名 为 font01 的 类 CSS 样式 ， 可 以 看 到 为 文字 添加 下 划 
线 的 效果 ， 如 图 10-26 所 示 。 转 换 到 外 部 样式 表 文 件 中 ， 创 建 名 为 .font02 的 类 CSS 样式 ， 如 
10-27 所 示 。 





font62{ 
text-decoration:Line-throughj 











00 





图 10-26 图 10-27 


辐 5 罗 | 返回 设计 页 面 中 ， 为 相应 的 文字 应 用 名 为 font02 的 类 CSS 样式 ， 可 以 看 到 为 文字 添加 删除 
线 的 效果 ， 如 图 10-28 所 示 。 转 换 到 外 部 样式 表 文 件 中 ， 创 建 名 为 .font03 的 类 CSS 样式 ， 如 
10-29 所 示 。 





font63T 
text-decoration:overline; 











图 10-28 10-29 


”返回 设计 页 面 中 ， 为 相应 的 文字 应 用 名 为 font03 的 类 CSS 样式 ， 在 实时 视图 中 预览 页 面 ， 
可 以 看 到 为 文字 添加 顶 划 线 的 效果 ， 如 图 10-30 所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 文件 ， 在 浏 
览 器 中 预览 页 面 ， 效 果 如 图 10-31 所 示 。 
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图 10-30 图 10-31 


除 线 ， 在 CSS 样式 中 ， 可 以 将 下 划 线 、 顶 划 线 或 者 删除 线 的 值 同时 赋予 到 text- 


在 对 Web 页 面 进 行 设 计时 ， 如 果 希 望 文 字 既 有 下 划 线 ， 同 时 也 有 项 划 线 和 删 
decoration 属性 上 。 





在 CSS 样式 中 ， 字 符 间距 的 控制 是 通过 letter-spacing 属性 来 进行 调整 的 ， 该 属性 既 可 以 设置 
相对 数值 ， 也 可 以 设置 绝对 数值 ， 但 在 大 多 数 情况 下 使 用 相对 数值 进行 设置 。letter-spacing 属性 的 
语法 格式 如 下 。 


letter-spacing: 字符 间距 3 


设置 中 文字 符 间距 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-1-8.html 。” 视频 : 光盘 \ 视 频 \ 第 10 章 \10-1-8.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-1-8.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-32 所 示 。 转 换 到 该 网 页 链接 的 外 部 样式 表 文 件 中 ， 创 建 名 为 .font01 的 类 CSS 
样式 ， 如 图 10-33 所 示 。 


EP 








et 1 .fontel { 

8 font-size: 20px; 
font-weight: bold; 
letter-spacing: 1L9pxj 








图 10-32 图 10-33 


区 % 二 ”返回 设计 视图 中 ， 为 相应 的 文字 应 用 名 为 font01 的 类 CSS 样式 ， 可 以 看 到 所 设置 的 文字 间 
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距 的 效果 ， 如 图 10-34 所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 
10-35 所 示 。 





在 设计 网 页 时 , CSS 样式 可 以 控制 字体 样式 , 同时 也 可 以 控制 字 间 距 和 段落 样式 。 在 一 般 情况 下 ， 
设置 字体 样式 只 能 对 少数 文字 起 作用 ， 对 于 文字 段落 来 说 ， 还 是 需要 通过 设置 段落 样式 来 加 以 控制 。 


在 CSS 中 ， 可 以 通过 line-height 属性 对 段落 的 行 间距 进行 设置 。line-height 的 值 表示 两 行文 
字 基 线 之 间 的 距离 ， 既 可 以 设置 相对 数值 ， 也 可 以 设置 绝对 数值 。line-height 属性 的 基本 语法 格式 
如 下 。 


line-height: 行 间距 ; 


通常 在 静态 页 面 中 ， 字 体 的 大 小 使 用 的 是 绝对 数值 ， 从 而 达到 页 面 整 体 的 统一 ， 但 在 一 些 论坛 或 
者 博客 等 用 户 可 以 自由 定义 字体 大 小 的 网 页 中 ， 使 用 的 则 是 相对 数值 ， 从 而 便于 用 户 通过 设置 字体 大 
小 来 改变 相应 行距 。 





段落 首 行 缩 进 在 一 些 文章 开头 通常 都 会 用 到 。 段 落 首 行 缩 进 是 对 一 个 段落 的 第 1 行文 字 缩 进 两 个 
字符 进行 显示 。 在 CSS 样式 中 是 通过 text-~indent 属 性 进行 设置 的 .text-~indent 属性 的 基本 语法 如 下 。 


text-indent: 首 行 缩 进 量 ; 
美化 网 页 中 的 段落 文本 


最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-2-2.html 视频: 光盘 \ 视 频 \ 第 10 章 \10-2-2.mp4 


[GE 执行 “文件 > 打开 ”命令 ,打开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-2-2.html”， 可 以 看 到 
页 面 效 果 , 如 图 10-36 所 示 。 转换 到 该 网 页 链接 的 外 部 样式 表 10-2-2.css 文件 中 , 创建 名 为 .font01 
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的 类 CSS 样式 ， 如 图 10-37 所 示 。 


Ey 








fontol 工 
line-height: 30px; 








图 10-36 图 10-37 


E 世 ”返回 设计 页 面 中 ， 选 中 相应 的 段落 文本 ， 为 其 应 用 名 为 font01 的 类 CSS 样式 ， 可 以 看 到 设 
置 行 间距 后 的 效果 ， 如 图 10-38 所 示 。 切 换 到 外 部 样式 表 文件 中 ， 在 名 为 .font01 的 类 CSS 样式 中 
添加 text-indent 属性 设置 代码 ， 如 图 10-39 所 示 。 





全 新 车 型 ， 激 情 上 市 ! 





fontg91l { 
line-height: 39px 
text-indent: 28pxj 











图 10-38 图 10-39 


通常 ， 一 般 文章 段落 的 首 行 缩 进 在 两 个 字符 的 位 置 ， 因 此 在 使 用 CSS 样式 对 段 
落 设置 首 行 缩 进 时 ， 首 先 需 要 明白 该 段落 字体 的 大 小 ， 然 后 再 根据 字体 的 大 小 设置 
首 行 缩 进 的 数值 。 





葬 蜀 ”返回 设计 视图 中 ， 可 以 看 到 页 面 中 段落 首 行 缩 进 的 效果 ， 如 图 10-40 所 示 。 保 存 页 面 并 保 
存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 10-41 所 示 。 


全 新 车 型 激情 上 市 
| 


全 新 车 型 ,激情 上 市 ! 





图 10-40 图 10-41 
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在 CSS 样式 中 ， 段 落 的 水 平 对 齐 是 通过 text-align 属性 进行 控制 的 ， 水 平 对 齐 有 4 种 方式 ， 分 
别 为 左 对 齐 、 水 平 居中 对 齐 、 右 对 齐 和 两 端 对 齐 。text-align 属性 的 基本 语法 如 下 。 


text-align: left | center | right | justify; 


text~align 属性 的 属性 值 说 明 如 表 10-7 所 示 。 


表 10-7 text-align 属性 的 属性 值 说 明 
说 明 
IG L 该 属性 值 表示 段落 的 水 平 对 齐 方式 为 左 对 齐 
[5 该 属性 值 表示 段落 的 水 平 对 齐 方式 为 居中 对 齐 
[FOR 该 属性 值 表示 段落 的 水 平 对 齐 方式 为 右 对 齐 
[YL 该 尾 性 值 表示 段落 的 水 平 对 齐 方式 为 两 端 对 齐 


两 端 对 齐 是 美化 段落 文本 的 一 种 方法 ， 可 以 使 段落 的 两 端 与 边界 对 齐 。 但 两 端 
对 齐 的 方式 只 对 整 段 的 英文 起 作用 ， 对 于 中 文 来 说 没有 什么 作用 。 这 是 因为 英文 段 
落 在 换行 时 为 保留 单词 的 完整 性 ， 整 个 单词 会 一 起 换行 ， 所 以 会 出 现 段 落 两 端 不 对 
齐 的 情况 。 两 端 对 齐 只 能 对 这 种 两 端 不 对 齐 的 段落 起 作用 ， 而 中 文 段 落 由 于 每 一 个 
文字 与 符号 的 宽度 相同 ， 在 换行 时 段落 是 对 齐 的 ， 因 此 自然 不 需要 使 用 两 端 对 齐 。 





设置 文本 水 平 对 齐 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-2-3.html 。 视频: 光盘 \ 视 频 \ 第 10 章 \10-2-3.mp4 


[GE 执行 “文件 > 打开” 命令， 打开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-2-3.html”， 可 以 看 到 
页 面 效 果 ， 如 图 10-42 所 示 。 转换 到 该 网 页 链接 的 外 部 样式 表 文 件 中 ,找到 名 为 #ext 的 CSS 样式 ， 
如 图 10-43 所 示 。 





#text 工 
width: 450px; 
height: auto; 
overflow: hidden 














图 10-42 图 10-43 


葬 击 ”在 名 为 #text 的 CSS 样式 中 添加 text-align 属性 设置 代码 ， 如 图 10-44 所 示 。 返 回 设计 界 
面 中 ， 可 以 看 到 id 名 为 text 的 Div 中 的 内 容 水 平 居中 显示 ， 效 果 如 图 10-45 所 示 。 
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全 新 激情 上 市 ， 欢 迎 品 鉴 ! 





Ftext + 
width: 450px; 
height: auto; 
overflow: hidden; 
text-align: center ;| 











图 10-44 图 10-45 


V5 转换 到 外 部 样式 表 文件 中 ， 在 名 为 #ext 的 CSS 样式 中 修改 text-align 属性 设置 代码 ， 如 
图 10-46 所 示 。 返 回 设计 视图 中 ， 可 以 看 到 id 名 为 text 的 Div 中 的 内 容 水 平 右 对 齐 显示 ， 效 果 如 图 
10-47 所 示 。 





全 新 激情 上 市 ， 欢 迎 品 鉴 ! 





Ftext + 
width: 450px; 
height: auto; 
overflow: hidden; 


text-ali gn: ri ght j 





[ 











图 10-46 图 10-47 


在 设置 文字 的 水 平 对 齐 时 , 如 果 需 要 设置 对 齐 的 段落 不 只 一 段 , 根据 不 同 的 文字 ， 
页 面 的 变化 也 会 有 所 不 同 。 如 果 是 英文 ， 那 么 段落 中 每 一 个 单词 的 位 置 都 会 相对 于 
整体 而 发 生 一 些 变化 ; 如 果 是 中 文 ， 那 么 段落 中 除了 最 后 一 行文 字 的 位 置 会 发 生变 
化 外 ， 其 他 段落 中 文字 的 位 置 相对 于 整体 则 不 会 发 生变 化 。 





在 CSS 样式 中 ， 文 本 垂直 对 齐 是 通过 vertical-align 属性 进行 设置 的 ， 常 见 的 文本 垂直 
对 齐 方式 有 3 种 ， 分 别 为 顶端 对 齐 、 垂 直 居中 对 齐 和 底 端 对 齐 。vertical-align 属性 的 语法 格式 
如 下 。 


vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | 
length; 


vertical-align 属性 的 属性 值 说 明 如 表 10-8 所 示 。 
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表 10-8 vertical-align 属性 的 属性 值 说 明 


属性 值 | 说 。 明 
[ES 该 属性 值 表 示 与 对 象 基线 对 齐 

[SO 该 属性 值 表示 委 直 对 齐 文本 的 下 标 
[SURG 该 属性 值 表 示 委 直 对 齐 文本 的 上 标 
[GD 该 属性 值 表 示 与 对 象 的 顶部 对 齐 
[EGR 该 忆 性 值 表 示 对 齐 文本 项 部 
[aa 该 属性 值 表 示 与 对 象 中 部 对 齐 
[EGG 该 属性 值 表 示 与 对 象 底部 对 齐 
[EDotom | 该 属性 值 表 示 对 齐 文本 底部 


设置 具体 的 长 度 值 或 百分比 数值 ， 可 以 使 用 正 值 或 负 值 ， 定 义 由 基线 算 起 的 偏 移 量 。 基 
线 对 于 数值 来 说 为 0， 对 于 百分比 数 来 说 是 0% 


段落 垂直 对 齐 只 对 行内 元 素 起 作用 ， 行 内 元 素 也 称 为 内 联 元 素 ， 在 没有 任何 布局 属性 作用 
时 ， 上 默认 排列 方式 是 同行 排列 ， 直 到 宽度 超出 包含 的 容器 宽度 时 才 会 自动 换行 。 段 落 垂直 对 齐 
需要 在 行内 元 素 中 进行 ， 如 <span></span>、<p></p> 以 及 图 片 等 ， 否 则 段落 垂直 对 齐 不 会 
起 作用 。 














设置 文本 垂直 对 齐 
最 终 文 件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-2-4.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-2-4.mp4 


I 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-2-4.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-48 所 示 。 转 换 到 该 网 页 链接 的 外 部 样式 表 文 件 中 ， 创 建 名 为 .font01 的 类 CSS 
样式 ， 如 图 10-49 所 示 。 


ER 。 梯 靖 ， 覃 + 看 可 村 3 

ri 让 本 本 本 本 
最 新 推出 甜 密 系 列 
EL 

PR 1 











.fontOl 工 
vertical-align: top; 














hin sm 


图 10-48 图 10-49 


国 醒 。 返回 设计 页 面 中 ， 选 中 相应 的 图 片 ， 在 “类 ”下 拉 列 表 中 选择 刚 定义 的 类 CSS 样式 应 用 ， 
如 图 10-50 所 示 。 完 成 类 CSS 样式 的 应 用 ， 可 以 看 到 页 面 中 文本 相对 于 图 像 顶端 对 齐 的 效果 ， 如 
10-51 所 示 。 
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测 本 光村 ( 委 直 居中 对 刘 ) “一 


毕 全 记忆 Ni 刘 ) 





在 使 用 CSS 样式 为 文字 设置 垂直 对 齐 时 ， 首 先 必 须要 选择 一 个 参照 物 ， 也 就 是 
提示 行内 元 素 。 但 是 在 设置 时 ， 由 于 文字 并 不 属于 行内 元 素 ， 因 此 ， 在 Div 中 不 能 直接 
对 文字 进行 垂直 对 齐 的 设置 ， 只 能 对 元 素 中 的 图 片 进行 垂直 对 齐 设置 ， 从 而 达到 文 
字 的 对 齐 效果 。 


SS 


国 几 转换 到 外 部 样式 表 文 件 中 ， 创 建 名 为 .font02 的 类 CSS 样式 ， 如 图 10-52 所 示 。 返 回 设计 
页 面 中 ， 为 相应 的 文字 旁 的 图 片 应 用 名 为 font02 的 类 CSS 样式 ， 可 以 看 到 页 面 中 文本 相对 于 图 像 
垂直 居中 对 齐 的 效果 ， 如 图 10-53 所 示 。 


2 (下 hx) 


fontg2 { 
vertical-align: middle;y | © 
Et IN 掉 ) 


























图 10-52 图 10-53 


I。” 转 换 到 外 部 样式 表 文件 中 ， 创 建 名 为 .font03 的 类 CSS 样式 ， 如 图 10-54 所 示 。 返 回 设计 
页 面 中 ， 为 相应 的 文字 旁 的 图 片 应 用 名 为 font03 的 类 CSS 样式 ， 保 存 页 面 并 保存 外 部 CSS 样式 文 
件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 界面 中 文本 垂直 对 齐 的 效果 ， 如 图 10-55 所 示 。 


最 新 推出 甜 灾 系列 


本 5 月 但 最 新 推出 到 系列 


前 100 人 预定 的 岳 窜 可 以 还 有 神 和 礼品 
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ar 





.font@3 { 
vertical-align: bottom;l 











图 10-54 图 10-55 
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对 于 网 页 而 言 ， 文 字 永远 都 是 不 可 缺少 的 重要 元 素 ， 也 是 传递 信息 的 主要 手段 。 在 CSS 3 中 新 
增 了 几 种 有 关 网 页 文字 控制 的 属性 ， 下 面 分 别 对 这 几 种 新 增 的 文字 控制 属性 进行 介绍 。 


在 网 页 中 显示 信息 上 时， 如果 指定 显示 信息 过 长 ， 超 过 了 显示 区 域 的 宽度 ， 其 结果 就 是 信息 撑 破 指 
定 的 信息 区 域 ， 从 而 破坏 了 整个 网 页 布局 。 如 果 设 置 的 信息 显示 区 域 过 长 ， 就 会 影响 整体 页 面 的 效果 。 
以 前 遇 到 这 种 情况 ， 需 要 使 用 JavaScript 将 超出 的 信息 省 略 。 现 在 ， 只 需要 使 用 CSS 3 中 新 增 的 
text-overflow 属性 ， 就 可 以 解决 这 个 问题 。 

text-overflow 属性 用 于 设置 是 否 使 用 一 个 省 略 标记 ( … ) 表示 对 象 内 文本 的 溢出 。 该 属性 仅 是 
注解 ， 当 文本 溢出 时 是 否 显示 省 略 标记 ， 并 不 具备 其 他 的 样式 属性 定义 。 要 实现 溢出 时 产生 省 略 号 的 
效果 还 需要 定义 ; 强制 文本 在 一 行内 显示 ( white-space: nowrap ) 及 溢出 内 容 为 隐藏 ( overflow: 
hidden ) ， 只 有 这 样 才能 实现 溢出 文本 显示 省 略 号 的 效果 。text-overflow 属性 的 语法 格式 如 下 。 


text-overflow: clip | ellipsis; 


text-overflow 属性 的 属性 值 说 明 如 表 10-9 所 示 。 
表 10-9 text-overflow 属性 值 说 明 


a 说 。 明 
[LU 不 显示 省 略 标记 (… ) ， 而 是 简单 的 裁 切 
[ENRSISRLLLL 当 对 象 内 文本 溢出 时 显示 省 略 标记 (… ) 


控制 文本 溢出 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-3-1.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-3-1.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-3-1.html”， 可 以 看 
到 页 面 效 果 ， 如 图 10-56 所 示 。 转 换 到 网 页 HTML 代码 中 ， 可 以 看 到 名 称 为 text1 和 text2 的 两 个 
Div 中 的 文字 内 容 ， 如 图 10-57 所 示 。 


aa 











<body> 
<div id="box"> 

<div id="text1"> 我 们 是 国内 领先 的 互动 多 媒体 设计 公司 </div> 

<div id="text2"> 我 们 是 国内 领先 的 互动 多 媒体 设计 公司 </div> 

<div id="welcome">&gt;&gt; 欢迎 来 到 红袖 网 站 | 点 击 进入 </div> 
</div> 
</body> 











图 10-56 图 10-57 


本 转换 到 该 网 页 链接 的 外 部 样式 表 文 件 中 ,找到 名 为 共 ext1 的 CSS 样式 , 如 图 10-58 所 示 。 
在 名 为 共 ext1 的 CSS 样式 中 添加 white-space 和 text-overflow 属性 设置 代码 , 如 图 10-59 所 示 。 
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Ftextl 工 





Ftextl + width: 219px; 
width: 210px; spl 
height: 30px; ine-height: 36px; 


和 margin-left: 590px; 
Line-height: 39px; overflow: ndens 
margin-left: 590pxi| 


white-space: nowrap 
overflow: hidden; Text-overTlow: © Ow: cre 


} [ 


图 10-58 图 10-59 

















在 CSS 样式 代码 中 white-space: nowrap; 是 强制 文本 在 一 行内 显示 ， 
overflow: hidden; 是 设置 溢出 内 容 为 隐藏 ， 要 想 通 过 text-overflow 属性 实现 溢出 
文本 显示 省 略 号 ， 就 必须 添加 这 两 个 属性 定义 ， 否 则 无 法 实现 。 
本 5 在 名 为 #text2 的 CSS 样式 中 添加 white-space 和 text-overflow 属性 设置 代码 ， 如 图 10-60 
所 示 。 返 回 设计 视图 中 ， 保 存 页 面 并 保存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 通过 
text-overflow 属性 实现 的 溢出 文本 显示 为 省 略 号 的 效果 ， 如 图 10-61 所 示 。 





text2 + 
width: 210px; 
height: 36px; 
line-height: 30px; 
margin-left: 590px; 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 











图 10-60 图 10-61 


需要 特殊 说 明 的 是 ，text-overflow 属性 非常 特殊 ， 当 设置 的 属性 值 不 同时 ， 其 
浏览 器 对 text-overflow 属性 支持 也 不 相同 。 当 text-overflow 属性 值 为 clip 时 ， 
主流 的 浏览 器 都 能 够 支持 ; 如果 text-overflow 属性 值 为 ellipsis 时 ， 除 了 Firefox 
浏览 器 不 支持 ， 其 他 主流 的 浏览 器 都 能 够 支持 。 








word-wrap 属性 用 于 设置 当 文本 行 超过 指定 容器 的 边界 时 是 否 断 开 转行 ， 该 属性 的 语法 格式 
如 下 。 


word-wrap: normal | break-word7 


人 2o0 





word-wrap 属性 的 属性 值 说 明 如 表 10-10 所 示 。 


表 10-10 word-wrap 属性 值 说 明 
说 明 






属性 值 
[memmal 控制 连续 文本 换行 


break=Word ”| 内 容 将 在 边界 内 换行 。 如 果 需 要 ， 词 内 换行 (word-break ) 也 会 发 生 


word-break 属性 用 于 设置 指定 容器 内 文本 的 字 内 换行 行为 ， 尤 其 在 出 现 多 种 语言 时 。word- 
break 属性 的 语法 格式 如 下 。 


word-break: normal | break-all | keep-all; 


word-break 属性 的 属性 值 与 使 用 的 文本 语言 有 关系 ， 属 性 值 说 明 如 表 10-11 所 示 。 


表 10-11 word-break 属性 值 说 明 
性 值 | 说 。 明 
[Amal 根据 亚洲 语言 和 非 亚洲 语言 的 文本 规则 ， 人 允许 在 字 内 换行 
Ee | 与 亚洲 语言 的 normal 相同 ， 也 多 许 非 亚 洲 语言 文本 行 的 行 意 字 内 断 开 ， 该 值 适合 包含 
一 些 非 亚洲 文本 的 亚洲 文本 
与 所 有 非 亚洲 语言 的 normal 相同 ， 对 于 中 文 、 韩 文 、 日 文 ， 不 允许 字 断 开 ， 适 合 包含 
少量 亚洲 文本 的 非 亚洲 文本 






控制 英文 内 容 强制 换行 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-3-2.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-3-2.mp4 


[GE 执行 “文件 > 打开” 命令， 打开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-3-2.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-62 所 示 。 转 换 到 HTML 代码 中 ， 可 以 看 到 id 名 为 text1 和 text2 中 的 内 容 是 
同 的 ， 不 同 的 是 text1 中 的 英文 单词 与 单词 之 间 没有 空格 和 标点 符号 ， 如 图 10-63 所 示 。 





<body> 
|<div id="bg"> 
<div id="box"> 
<p class="font@1">KEEP<br> 
PORTLAND<br> 


WEIRD 


</p> 
<div id="textl"> 
AFTERTHECASCADIASUBDUCTIONZONERUPTURESANDPORTLANDISREDUCEDTOTOASTHOWWI| 
LLWEKEEPTHEPORTLANDSPIRITALIVEPREPARATIONSTOCKTHESEMUSTHAVESNEXTTOYOUR| 
WATERANDNUTSTOGETHERWEWILLKEEPPORTLANDWEIRD!1 </div> 
<div 1d="text2">AFTER THE CASCADIA SUBDUCTION ZONE RUPTURES AND 
PORTLAND IS REDUCED TO &quot3TOAST&quot; HOW WILL WE KEEP THE PORTLAND| 
SPIRIT ALIVE? PREPARATION. STOCK THESE MUST-HAVES NEXT TO YOUR WATER 
AND NUTS. TOGETHER,WE WILL KEEP PORTLAND WEIRD!</div> 
<img src="images/163263.png"” width="219" height="41" att=n/> </ 














图 10-62 图 10-63 


国 z 在 浏览 器 中 预 览 ， 可 以 看 到 id 名 为 text1 中 的 英文 内 容 显示 到 该 Div 的 右边 界 后 ， 超 出 部 分 
内 容 被 隐藏 了 ， 并 没有 自动 换行 显示 ， 而 id 名 为 text2 中 的 英文 内 容 正 常 显示 ， 如 图 10-64 所 示 。 转 
换 到 外 部 样式 表 文 件 中 ,可 以 看 到 名 为 #ext1 和 名 为 黄 ext2 的 CSS 样式 完全 一 样 , 如 图 10-65 所 示 。 
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#textl { 
background-color: rgba(0,0,0,0.2); 
border: solid lpx #336; 
margin-top: 10px; 














小 
#text2 { 
background-color: rgba(0,0,0,0.2); 
border: solid lpx #336; 
margin-top: 10px; 
旦 
图 10-64 图 10-65 


国 5 在 名 为 #text1 的 CSS 样式 中 添加 word-wrap 属性 设置 代码 ， 如 图 10-66 所 示 。 保 存 页 
面 并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 强制 换行 的 效果 ， 如 图 10-67 所 示 。 





Etextl 工 
background-color: rgba(9,9;,9;9.2) ;| 
border: solid lpx #336; 
margin-top: 10px; 
word-wrap: break-word; 














} 
图 10-66 图 10-67 
word-wrap 属性 主要 是 针对 英文 或 阿拉 伯 数 字 进 行 强制 换行 ， 而 中 文 内 容 
本 身 具 有 遇 到 容器 边界 后 自动 换行 的 功能 ， 所 以 将 该 属性 应 用 于 中 文 起 不 到 什么 
效果 。 





在 显示 文字 时 有 时 需要 制作 出 文字 的 阴影 效果 ， 从 而 增强 文字 的 瞩目 性 。 通 过 CSS 3 中 新 增 的 
text-shadow 属性 就 可 以 轻松 地 实现 为 文字 添加 阴影 的 效果 ，text-shadow 属性 的 语法 格式 如 下 。 


text-shadow: length | length |opacity | color; 


text-shadow 属性 的 属性 值 说 明 如 表 10-12 所 示 。 


@202 









表 10-12 text-shadow 属性 的 属性 值 说 明 
说 明 
TAO 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 可 以 为 负 值 ， 用 于 指定 阴影 的 水 平 延伸 距离 
由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 以 为 负 值 ， 用 于 指定 模糊 效果 的 作用 距离 。 
如 果 仅仅 需要 模糊 效果 ， 将 前 两 个 length 属性 全 部 设置 为 0 
[a 指定 阴影 项 色 


为 网 页 文本 添加 阴影 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-3-3.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-3-3.mp4 


[GE 执行 “文件 > 打开” 命令， 打开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-3-3.html”， 可 以 看 到 
页 面 效 果 ， 如 图 10-68 所 示 。 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 中 的 文字 效果 ， 如 图 10-69 所 示 。 


LN rm 用 





| KEEP 
ey | PORTLAND 
WEIRD 


图 10-68 


图 10-69 


2。 转换 到 该 网 页 链接 的 外 部 样式 表 文 件 中 , 创建 名 为 .font01 的 类 CSS 样式 , 如 图 10-70 所 示 。 
返回 设计 视图 中 ， 为 相应 的 文字 应 用 名 为 font01 的 类 CSS 样式 ， 保 存 页 面 ， 并 保存 外 部 CSS 样式 
文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 文字 阴影 的 效果 ， 如 图 10-71 所 示 。 





font6I 工 
text-shadow: 5px 2px 6px #666|] 














图 10-70 


在 CSS 的 字体 样式 中 ， 通 常会 受到 客户 端的 限制 ， 只 有 在 客户 端 安装 了 该 字体 后 ， 样 式 才能 正 
确 显示 。 如 果 使 用 的 不 是 常用 的 字体 ， 对 于 没有 安装 该 字体 的 用 户 而 言 ， 是 看 不 到 真正 的 文字 样式 的 。 
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因此 ， 设 计 师 会 避免 使 用 不 常用 的 字体 ， 更 不 敢 使 用 艺术 字体 。 

为 了 弥补 这 一 缺陷 CSS 3 新 增 了 字体 自 定 义 功能 ， 通 过 @font-face 规则 来 引用 互联 网 任意 
服务 器 中 存在 的 字体 。 这 样 在 设计 页 面 时 ， 就 不 会 因为 字体 稀缺 而 受 限制 。 

通过 @font-face 规则 可 以 加 载 服务 器 端的 字体 文件 ， 让 客户 端 显 示 客 户 端 所 没有 安装 的 字体 ， 
@font-face 规则 的 语法 格式 如 下 。 


efont-face: {font-family: 取 值 ; font-style: 取 值 ; font-variant: 取 值 ; font-weight: 
取 值 ; font-stretch: 取 值 ; font-size: 取 值 ; src: 取 值 ; } 


@font-face 规则 的 相关 属性 说 明 如 表 10-13 所 示 。 
表 10-13 @font-face 规则 的 相关 属性 说 明 


IE 说 了 明 

TenEiami | 设置 文本 的 字体 名 称 

FnEsyia | 设置 文本 样式 

[GANEVSTiSnt | 设置 文本 是 否 大 小 写 

[EGREEWeight | 设置 文本 的 粗细 

ICNESHTeICh | 设置 文本 是 否 横向 的 拉 伸 变形 

[GAS 设置 文本 字体 大 小 
设置 自 定义 字体 的 相对 路 径 或 者 绝对 路 径 ， 可 以 包含 format 信息 。 注 意 ， 此 属性 只 能 在 @ 
font-face 规则 中 使 用 


对 于 @font-face 规则 的 兼容 ， 主 要 是 字体 format 的 问题 。 因 为 不 同 的 浏览 
器 对 字体 格式 的 支持 是 不 一 致 的 ， 各 种 版 本 的 浏览 器 支持 的 字体 格式 有 所 区 别 。 
TrueType ( .好 ) 格式 的 字体 对 应 的 format 属性 为 truetype; OpenType ( .otf) 
格式 的 字体 对 应 的 format 属性 为 opentype; Embedded Open Type ( .eot) 格 
式 的 字体 对 应 的 format 属性 为 eot。 


在 网 页 中 使 用 特殊 字体 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-3-4.html 视频: 光盘 \ 视 频 \ 第 10 章 \10-3-4.mp4 


[GE 执行 “文件 > 打开” 命令， 打开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-3-4.html”， 可 以 看 到 
页 面 效 果 , 如 图 10-72 所 示 。 在 Chrome 浏览 器 中 预览 该 页 面 , 可 以 看 到 页 面 中 默认 的 字体 显示 效果 ， 
如 图 10-73 所 示 。 


忆 








图 10-72 图 10-73 
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区 出 转换 到 该 网 页 链接 的 外 部 样式 表 文件 中 , 创建 @font-face 规则 和 名 为 .font01 的 类 CSS 样式， 
如 图 10-74 所 示 。 返 回 设计 视图 中 ， 为 相应 的 文字 应 用 名 为 font01 的 类 CSS 样式 ， 保 存 页 面 ， 并 保 
存 外 部 CSS 样式 文件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 特殊 的 字体 效果 ， 如 图 10-75 所 示 。 





Efont-Tace T 
font-family: myfont; * 
src: url(../images/Hemihead. ttf) format(" truetype" "); 

站 定 字体 路 径 





上 
.fontel { 
font-famity: myfont; 








日 





图 10-74 图 10-75 


在 @font-face 规则 中 ， 通 过 font-family 属性 声明 了 字体 名 称 myfont， 并 通 
过 src 属性 指定 了 字体 文件 的 url 相对 地 址 。 在 接 下 来 名 称 为 font01 的 类 CSS 样 
式 中 ， 就 可 以 通过 名 称 myfont 来 引用 字体 定义 的 规则 了 。 


通过 @font-face 规则 使 用 服务 器 字体 ， 不 建议 应 用 于 中 文 网 站 。 因 为 中 文 的 
字体 文件 都 是 几 MB 到 十 几 MB， 字 体 文件 的 容量 较 大 ， 会 严重 影响 页 面 的 加 载 速 
度 。 如 果 是 少量 的 特殊 字体 ， 还 是 建议 使 用 图 片 来 代替 。 而 英文 的 字体 文件 只 有 几 
十 KB， 非 常 适 合 使 用 @font-face 规则 。 





通过 CSS 属性 来 控制 列表 ， 能 够 从 更 多 方面 控制 列表 的 外 观 ， 使 列表 看 起 来 更 加 整齐 和 美观 ， 使 
网 站 实用 性 更 强 。 在 CSS 样式 中 专门 提供 了 控制 列表 样式 的 属性 , 下 面 就 不 同类 型 的 列表 分 别 进行 介绍 。 


列表 可 分 为 无 序 项 目 列表 和 有 序 编号 列表 ， 所 以 在 两 种 列表 中 list-style-type 属性 的 属性 值 也 
是 有 很 大 区 别 的 ， 下 面 依次 进行 介绍 。 

无 序 项 目 列表 是 网 页 中 运用 得 非常 多 的 一 种 列表 形式 ， 用 于 将 一 组 相关 的 列表 项 目 排列 在 一 起 ， 
并 且 列 表 中 的 项 目 没有 特别 的 先后 顺序 。 无 序列 表 使 用 <li> 标签 来 罗列 各 个 项 目 ， 并 且 每 个 项 目前 
面 都 带 有 特殊 符号 。 在 CSS 样式 中 ，list-style-type 属性 用 于 控制 无 序列 表 项 目前 面 的 符号 ，list- 
style-type 属性 的 语法 格式 如 下 。 


list-style-type: disc | circle | square | none; 
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在 设置 无 序列 表 时 ，list-style-type 属性 的 属性 值 说 明 如 表 10-14 所 示 。 
表 10-14 list-style-type 属性 的 无 序列 表 属 性 值 说 明 


属性 值 | 说 。 明 
idise | 该 必 性 值 表示 项 目 列表 前 的 符号 为 实心 圆 
direle 该 必 性 值 表 示 项 目 列表 前 的 符号 为 空心 圆 
square “| 该 属性 信 表 示 项 目 列表 前 的 符号 为 实心 方块 
.nene | 该 属性 信 表 示 项 目 列表 前 不 使 用 任何 符号 










有 序列 表 与 无 序列 表 相 反 ， 有 序列 表 即 具 有 明确 先后 顺序 的 列表 ， 默 认 情况 下 ， 创 建 的 有 序列 表 
在 每 条 信息 前 加 上 序号 1、2、3… 通 过 CSS 样式 中 的 list-style-type 属性 可 以 对 有 序列 表 进 行 控制 。 
list-style-type 属性 的 基本 语法 格式 如 下 。 


list-style-type: decimal | decimal-leading-zero | lower-roman | upper-roman | 


lower-alpha | upper-alpha | none | inherit; 


在 设置 有 序列 表 时 ，list-style-type 属性 的 属性 值 说 明 如 表 10-15 所 示 。 


表 10-15 list-style-type 属性 的 有 序列 表 属 性 值 说 明 

说 明 

[GCCall 该 属性 值 表 示 有 序列 表 前 使 用 十 进 制 数字 标记 (1、2、3……) 
[GEIS501iOS 610 该 属性 值 表示 有 序列 表 前 使 用 有 前 导 零 的 十 进 制 数字 标记 ( 01、02、03……) 
[GAO 该 属性 值 表 示 有 序列 表 前 使 用 有 前 导 零 的 十 进 制 数字 标记 ( 01、02、03……) 
[RETETOTanll 该 属性 值 表示 有 序列 表 前 使 用 大 写 罗马 数字 标记 (1、I、 川 ……) 
[GAGE 该 属性 值 表示 有 序列 表 前 使 用 小 写 英文 字母 标记 ( a、b、c……) 

二 下 该 属性 值 表示 有 序列 表 前 使 用 大 写 英文 字母 标 忆 ( A、B、C…) 
[FAGnGULLLLLLLL 该 属性 值 表 示 有 序列 表 前 不 使 用 任何 形式 的 符号 

[NGF 该 属性 值 表 示 有 序列 表 继承 父 元 素 的 list-style-type 属性 设置 


设置 新 闻 列表 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-4-11.html 。 视频 光盘 \ 视 频 \ 第 10 章 \10-4-11.mp4 














I 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-4-11.html”， 可 以 看 到 
页 面 效果 ,如 图 10-76 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 页 面 中 项 目 列表 的 代码 ,如 图 10-77 所 示 。 


代码 | 拆 分 Ca] 开打 图 。 蕊 。 村 昕 设置 新 持 5 计 寺 音 Fbody> 
WB ul) lediv id="box"> 
i <div id="content"> 
<ul> 
<1i> [加 点 攻略 ]38 级 四 职业 专 打 boss 技 能 点 加 法 </13| 
<1i> [任务 系统 ] 技 能 点 的 任务 </11> 
<1i> [加 点 攻略 ] 法 析 .领地 Ys 加 点 </1i> 
<11> [经 验 升级 ] 法 系 挂机 全 攻略 </11> 
<1i> [副本 Boss] 〖 迷 雳 沼泽 ] 通关 经 验 分 享 </11> 
<1i> [装备 加 工 ] 仙 武器 属性 与 图 示 </11> 
<1i> [装备 加 工 ] 二 代 通 天 套装 属性 图 一 览 </1i> 
</ut> 
</div> 
/div> 
/body> 









































图 10-77 
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[本 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 文件 中 , 创建 名 为 #contentii 的 CSS 样 式 ,如 图 10-78 所 示 。 
保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 中 无 序列 表 的 效果 , 如 图 10-79 所 示 。 





Fcontent TIT 
list-style-type: square; 【这 芝 汪 采 通关 EE 人 训 
list-style-position: inside; ，。 弄 音 加 工人 去 内 属性 与 图 示 
line-height: 25px; ”_ 贡 各 加 工 :二 人 通天 天 法 属性 惠 _ 内 
border-bottom: dashed lpx #7cb8c2;| 














图 10-78 图 10-79 


list-~style-position 属性 用 于 设置 列表 符号 的 位 置 ， 该 属性 有 3 个 属性 值 。 属 
性 值 为 inside， 则 列表 符号 放置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 ; 属性 值 
为 outside， 则 列表 符号 放置 在 文本 以 外 ， 且 环绕 文本 不 根据 标记 对 齐 ; 属性 值 为 
inherit， 则 从 父 元 素 继承 list-style-position 属性 的 值 。 





设置 编号 列表 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-4-12.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-4-12.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-4-12.html”， 可 以 看 
到 页 面 效果 ， 如 图 10-80 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 页 面 中 编号 列表 的 HTML 代码 ， 如 
图 10-81 所 示 。 


代码 | 拆 分 








[tf ] 亢 时 视 图 区。 标题 ”设置 搞 号 列表 效 昌 Kbody> 

[HT BR , div id="box"> 
<div id="title"> 一 周 歌 曲 排 行 榜 </div 
<div id="music"> 

“ 太 4, 委 博 面前 wo 伯 
: <1i>: wholwho< /Li> 
: SR <11> 终 于 我 们 再 次 相遇 </1i> 
| mei : <1i> 美 丽 传 说 </11> 
1 天, {ER 后 : <1i> 有 一 天 ， 在 我 们 都 变 老 以 后 </1i> 
: | <11> 生 命 之 歌 </11> 

</ol> 

</div> 
/div> 
oa 加 天 人 zzz /body> 


图 10-80 图 10-81 
[GE 量 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 文件 中 ， 创 建 名 为 #music li 的 CSS 样式 ， 如 


10-82 所 示 。 保 存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 中 有 序列 表 的 效果 ， 
如 图 10-83 所 示 。 

















: 爱情 面前 whol9who 
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终于 我 们 再次 相遇 

FmusTc TT 美丽 传说 
list-style-type: upper-roman; Jy， 有 一 天 在 我 们 都 闪 老 以 后 
list-style-position: inside; Vy 生命 之 于 


border-bottom: solid lpx #F4F4F4;| 














图 10-82 图 10-83 





除了 可 以 使 用 CSS 样式 中 的 列表 符号 ， 还 可 以 使 用 list-style-image 属性 自 定义 列表 符号 ， 
list-style-image 属性 的 基本 语法 如 下 。 


list-style-image: 图 片 地 址 ; 


在 CSS 样式 中 ，list-style-image 属性 用 于 设置 图 片 作为 列表 样式 ， 只 需 输 入 图 片 的 路 径 作 为 
属性 值 即 可 。 


自 定义 新 闻 列 表 符 号 
最 终 文件 : 光盘 \ 最终 文件 \ 第 10 章 \10-4-2.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-4-2.mp4 


WI 执行 “文件 > 打开 ”命令 ,打开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-4-2.html”， 可 以 看 
到 页 面 效 果 ， 如 图 10-84 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 页 面 中 项 目 列表 的 HTML 代码 ， 如 
10-85 所 示 。 


人 | 折 分 [设计 | 区 损 图 。 七。 肯 晤 和 EX 新 是 上 有 ba Fbody> 
ET ER Rf, [cdiv 1d="box"> 
<div id="content"> 
<ul> 
<1i>[ 加 点 攻略 ]38 级 四 职业 专 打 boss 技 能 点 加 法 </1i>| 
<1i> [任务 系统 ] 技 能 点 的 任务 </11> 























1 只 务 利 站 拉 能 史 人 和 <1i>[ 加 点 攻略 ] 浅 析 .领地 ys 加 点 </11> 
[加 上 2 ] 尖 析 领地 fs 加 点 : <1i> [经 验 升级 ] 法 系 挂机 全 攻略 </11> 
上 虹 验 各] 法 生性 仙 全 z 呈 <1i> [副本 Boss] 〖 迷 才 沼 泽 ] 通 关 经 验 分 享 </11> 
“。 国 /2c65] [过 加 如 到 1 冯 关 生计 : <1i> [装备 加 工 ] 仙 武器 属性 与 图 示 </1i> 
Sr : <1i> [装备 加 工 ] 二 代 通天 套装 属性 图 一 览 </11> 
</ut> 
</div> 
k/div> 
ory iretosy 面 加 而 sx 上 /body> 
图 10-84 图 10-85 


到 ”转换 到 该 网 页 所 链接 的 外 部 CSS 样式 文件 中 ， 找 到 名 为 #content li 的 CSS 样式， 修改 
list-style-type 属性 设置 代码 ， 如 图 10-86 所 示 。 返 回 设计 视图 中 ， 可 以 看 到 列表 前 没有 任何 形式 
的 符号 ， 如 图 10-87 所 示 。 
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Fcontent TIT 
list-style-type:none; 
list-style-position: inside; 
line-height: 1l6px; 
padding: Spx 9px Spx 2px; 
border-bottom: dashed lpx #7cb8c2}| 











图 10-86 图 10-87 


栈 3 思 ” 转换 到 外 部 CSS 样式 文件 中 ， 在 名 为 #content li 的 CSS 样式 中 添加 list-style-image 属 


性 设置 代码 ， 如 图 10-88 所 示 。 保 存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 自 定 
义 列表 符号 的 效果 ， 如 图 10-89 所 示 。 





中 加 襄 芭 了 333 吕 四 职业 青 打 bcss 拷 陀 点 加 法 
content TiT 日 [任务 系统 入 本 点 国 任务 
list-style-type:none; 


外 [和 0 点 东阳; 浅 折 -领地 7SHM 点 
list-style-position: inside; 


中。 好 双生 直系 村 机 全 攻 隐 
list-style-image: url(../images/104201.gif);| 口 [副本 5055] 8 水 要 沼 汉 1 通关 533 分 刘 


ne-heTeht: 16px; 口 全 条 加 工 -外 示 咕 属 性 与 要 示 
padding: Spx Opx Spx 2px; 口 。 [ 著 音 加 工 ;二 作 通 天 套装 属性 图 一览 
border-bottom: dashed lpx #7cb8c2; 











图 10-88 图 10-89 


除了 可 以 使 用 CSS 样式 中 的 list-style-image 属性 定义 列表 符号 ， 还 可 以 使 
用 background-image 属性 来 实现 ， 首 先 在 列表 项 左边 添加 填充 ， 为 图 像 符号 预 留 
出 需要 占用 的 空间 , 然后 将 图 像 符 号 作为 背景 图 像 应 用 于 列表 项 即 可 。 在 网 页 页 面 中 ， 
经 常 将 图 片 作为 列表 样式 ， 用 来 美化 网 页 界面 、 提 升 网 页 整体 视觉 效果 。 





定义 列表 是 一 种 比较 特殊 的 列表 形式 ， 相 对 于 有 序列 表 和 无 序列 表 来 说 ， 应 用 得 比较 少 。 定 义 列 
表 的 <dl> 标签 是 成 对 出 现 的 ， 并 且 需 要 在 代码 视图 手动 添加 代码 。 从 <dl> 开始 到 </dl> 结束 ， 列 表 
中 每 个 元 素 的 标题 使 用 <dt></dt> 标签 ， 后 跟随 <dd></dd> 标签 ， 用 于 描述 列表 中 元 素 的 内 容 。 


制作 复杂 新 闻 列表 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-4-3.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-4-3.mp4 
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[GE 执行 “文件 > 打开” 命令， 打开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-4-3.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-90 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 页 面 中 定义 列表 的 HTML 代码 ， 如 图 10-91 
所 示 。 


em = <div id="List"> 


<dU 

<dt> 下 测 资 格 及 装备 保留 查询 正式 开启 ， 装 备 随行 ， 后 会 有 期 </dt> 
<dd>16/126</dd> 

<dt> 内 测 地 图 纪念 墙 绚烂 开启 ， 天 涯 掠影 ， 有 你 有 我 ! </dt><dd> 
16/17</dd> 

<dt>《 明 月 剑 天 涯 》 内 测 压力 测试 茎 关 服 公告 - 天 涯 不 远 ， 后 会 有 期 
</dt><dd>18/12</dd> 

<dt>【52PK】< 明 月 剑 天 涯 》 剑 试 蓝 蕊 回顾 专题 </dt><dd>18/e2</ 


<dt>【38386】 游戏 风云 盛典 ， 请 你 来 投票 </dt><dd>9/28</dd> 
<dt>【38386】< 天 沽 明 不 停 》 热 点 趣闻 一 手 抓 </dt><dd>9/28</dd 


<dt> 下 测 资 格 及 装备 保留 规则 说 明 ， 内 测 纪念 墙 即将 开启 </dt><dd> 
9/26</dd> 
</dt> 
</div> 











dd> 














图 10-90 图 10-91 


[E@E 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 文件 中 ， 创 建 名 为 #ist dt 和 #list dd 的 CSS 样式 ， 
如 图 10-92 所 示 。 保存 外 部 CSS 样式 文件 ,在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 中 定义 列表 的 效果 ， 
如 图 10-93 所 示 。 





FUTSE dt T 
width: 365px; 
float: left; 
background-image: url(../images/104365.png) | 
background-repeat: no-repeat; a 
background-position: left center; a 
padding-left: 15px; 1 天 且 人 3E 37 也 各 尖 天 和 二 -天 在 下 过 后 
border-bottom: dashed 1px #BDC8C4; pr 

b » 0026) gran, ERE 

slist dd { ? LI CRIT SF 
eth SOs + TNR, RAE 
float: left; 


border-bottom: dashed lpx #BDC8C4; 











L 





图 10-92 图 10-93 


定义 列表 是 一 种 比较 特殊 的 列表 形式 ， 设 计 者 必须 手动 添加 相关 的 <dl>、<dt> 
和 <dd> 标签 来 创建 定义 列表 ， 注 意 ，<dl>、<dt> 和 <dd> 标签 都 是 成 对 出 现 的 。 





通过 为 网 页 设置 一 个 合理 的 背景 能 够 烘托 网 页 的 视觉 效果 ， 给 人 一 种 协调 和 统一 的 视觉 感 ， 达 到 
美化 页 面 的 效果 。 不 同 的 背景 给 人 的 心理 感受 并 不 相同 ， 因 此 为 网 页 选择 一 个 合适 的 背景 非常 重要 。 


只 需 在 CSS 样式 中 添加 background-color 属性 ， 即 可 设置 网 页 的 背景 颜色 ， 它 接受 任何 有 效 
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的 颜色 值 ， 但 是 如 果 对 背景 颜色 没有 进行 相应 的 定义 ， 将 默认 背景 颜色 为 透明 。background-color 
的 语法 格式 如 下 。 


background-color: color | transparent; 


background-color 属性 的 属性 值 说 明 如 表 10-16 所 示 。 


表 10-16 background-color 属性 的 属性 值 说 明 
说 明 
[CC 设置 表 景 的 闫 色 ， 它 可 以 采用 英文 音 司 、 十 六 进 制 、RGB、HSL、HSLA 和 RGBA 格 式 


re ss, wp 


background-color 属性 还 可 以 使 用 transparent 和 inherit 值 。transparent 值 实际 上 是 所 有 
元 素 的 默认 值 ， 其 意味 着 显示 已 经 存在 的 背景 ; 如 果 确 实 需要 继承 background-color 属性 ， 则 可 以 
使 用 inherit 值 。 


background-color 属性 类 似 于 HTML 中 的 bgcolor 属性。CSS 样式 中 的 
background-color 属性 更 加 实用 ， 不 仅仅 是 因为 它 可 以 用 于 页 面 中 的 任何 元 素 ， 
bgcolor 属性 只 能 对 <body>、<table>、<tr>、<th> 和 <td> 标签 进行 设置 。 通 过 
CSS 样式 中 的 background-color 属性 可 以 设置 页 面 中 任意 特定 部 分 的 背景 颜色 。 





在 CSS 样式 中 ， 可 以 通过 background-image 属性 设置 背景 图 像 。background-image 属性 
的 语法 格式 如 下 。 


background-image: none | url; 


background-image 属性 的 属性 值 说 明 如 表 10-17 所 示 。 
表 10-17 background-image 属性 的 属性 值 说 明 


”属性 值 | 说 明 

[Rone 该 属性 值 是 默认 属性 ， 表示 无 背景 图 片 

国人 图 片 地 址 可 以 是 相对 路 径 地 址 ， 也 可 以 是 绝 
对 路 径 地 址 


使 用 background-image 属性 设置 的 背景 图 像 默 认 会 以 平 铺 的 方式 显示 ， 在 CSS 中 可 以 
通过 background-repeat 属性 设置 背景 图 像 重复 或 不 重复 的 样式 ， 以 及 背景 图 像 的 重复 方式 。 
background-repeat 属性 的 语法 格式 如 下 。 


background-repeat: no-repeat | repeat-x | repeat-y | repeat; 
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background-repeat 属性 的 属性 值 说明 如 表 10-18 所 示 。 








表 10-18 background-repeat 属性 的 属性 值 说 明 


六 伍 什 | 说 明 
) .表示 背景 图 像 不 重复 平 铺 ， 只 显示 一 次 

于 表示 背景 图 像 在 水 平方 向 重复 平 铺 

- 由 表示 背景 图 像 在 垂直 方向 重复 平 铺 


由 表示 背景 图 像 在 水 平和 垂直 方向 都 重复 平 铺 ， 该 属性 值 为 默认 值 


设置 网 页 背景 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-5-3.html 视频: 光盘 \ 视 频 \ 第 10 章 \10-5-3.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-5-3.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-94 所 示 。 转 换 到 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 body 的 CSS 样式 代码 ， 
如 图 10-95 所 示 。 


hat LE Lam ee 
让 


























BEELD. 
body{ 
font-family: Arial; 
= font-size: 14px; 
color: #CCC; 
line-height: 25px; 
上 
图 10-94 图 10-95 


E 开 于 在 body 标签 的 CSS 样式 中 添加 background-color 属性 设置 代码 ， 如 图 10-96 所 示 。 保 
存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 网 页 设置 背景 颜色 的 效果 ， 如 图 10-97 所 示 。 





body{ 
font-family: Arial; 
font-size: 14px; 
color: #CCC; 
line-height: 25px; 
background-color: #333333] 














图 10-96 图 10-97 


国 较 ”转换 到 外 部 样式 表 文 件 中 ， 在 名 为 body 的 CSS 样式 代码 中 添加 background-image 属性 
设置 代码 ， 如 图 10-98 所 示 。 保 存 外 部 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 网 页 设置 背 
景 图 像 的 效果 ， 如 图 10-99 所 示 。 
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bodyf 
font-family: Arial; 
font-size: 14px; 
color: #CCC; 
line-height: 25px; 
background-color: #333333; 


background- image: Url(../images/105308.jpg); 














上 
图 10-98 
使 用 background-image 属性 设置 背景 图 像 ， 背 景 图 像 默 认 在 网 页 中 是 以 左上 
角 为 原点 显示 的 ， 并 且 背 景 图 像 在 网 页 中 会 重复 平 铺 显示 。 


区 转换 到 外 部 CSS 样式 表 文 件 中 ， 在 名 为 body 的 CSS 样式 代码 中 添加 background- 
repeat 属性 设置 代码 ， 如 图 10-100 所 示 。 保 存 外 部 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 
背景 图 像 不 平 铺 ， 只 显示 一 次 的 效果 ， 如 图 10-101 所 示 。 





ody{ 
font-family: Arial; 

font-size: 14px; 

color: #CCC; 

line-height: 25px; 

background-color: #333333; 

background-image: urL(../images/165368.jpg) | 
background-repeat: no-repeat; 














图 10-100 图 10-101 


EE 玫 ”转换 到 外 部 CSS 样式 表 文 件 中 ， 在 名 为 body 的 CSS 样式 代码 中 修改 background- 
repeat 属性 的 属性 值 ， 如 图 10-102 所 示 。 保 存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 
背景 图 像 只 在 水 平方 向 平 铺 的 效果 ， 如 图 10-103 所 示 。 





lbody{ 
font-family: Arial; 
font-size: 14px; 
color: #CCC; 
line-height: 25px; 
background-color: #333333; 
background-image: url(../images/105308.jpg) 
background-repeat: repeat-x; 














图 10-102 图 10-103 
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国 畏 ”转换 到 外 部 CSS 样式 表 文 件 中 ， 在 名 为 body 的 CSS 样式 代码 中 修改 background- 
repeat 属性 的 属性 值 ， 如 图 10-104 所 示 。 保 存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 
背景 图 像 只 在 垂直 方向 上 平 铺 的 效果 ， 如 图 10-105 所 示 。 





0dy{ 
font-family: Arial; 
font-size: 14px; 
color: #CCC; 
line-height: 25px; 
background-color: #333333; 
background-image: url(../images/165368.jpg) 
background-repeat: repeat-y; 











图 10-104 图 10-105 


[GE 转换 到 外 部 CSS 样式 表 文 件 中 ， 在 名 为 body 的 CSS 样式 代码 中 修改 background- 
repeat 属性 的 属性 值 ， 如 图 10-106 所 示 。 保 存 外 部 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 背 
景 图 像 在 水 平和 垂直 方向 上 都 平 铺 的 效果 ， 如 图 10-107 所 示 。 





bodyt 
font-family: Arial; 
font-size: 14px; 
color: #CCC; 
line-height: 25px; 
background-color: #333333; 
background-image: url(../images/105308.jpg) | 
background-repeat: repeat; 











图 10-106 图 10-107 


为 背景 图 像 设置 重复 方式 ， 背景 图 像 就 会 沿 x 或 y 轴 进 行 平 铺 。 在 网 页 设计 中 ， 
提示 病 “这 是 一 种 很 常见 的 方式 。 该 方法 一 般 用 于 设置 渐变 类 背景 图 像 ， 通 过 这 种 方法 ， 可 
以 使 渐变 图 像 沿 设 定 的 方向 进行 平 铺 ， 形 成 渐变 背景 、 渐 变 网 格 等 效果 ， 从 而 达到 

减 小 背景 图 片 大 小 ， 加 快 网 页 下 载 速度 的 目的 。 





在 传统 的 网 页 布局 方式 中 ， 还 没有 办 法 实现 精确 到 像素 单位 的 背景 图 像 定位 。CSS 样式 打破 了 
这 种 局 限 ， 通 过 CSS 样式 中 的 background-position 属性 ， 能 够 在 页 面 中 精确 定位 背景 图 像 ， 更 
改 初 始 背景 图 像 的 位 置 。 该 属性 值 可 以 分 为 4 种 类 型 : 绝对 定义 位 置 (length ) 、 百 分 比 定义 位 置 
( percentage ) 、 垂 直 对 齐 值 和 水 平 对 齐 值 。background-position 属性 的 语法 格式 如 下 。 


@214 








background-position: length | percentage | top | center | bottom | left | right; 


background-position 属性 的 属性 值 说明 如 表 10-19 所 示 。 


表 10-19 background-position 属性 的 属性 值 说 明 

说 明 

该 属性 值 用 于 设置 背景 图 像 与 边 距 水 平和 垂直 方向 的 距离 长 度 , 长 度 单位 为 cm( 厘米 ) 、 
mm (毫米 ) 、 和 px (像素 ) 等 

Ipercentage | 该 属性 信用 于 根据 页 面 元 素 的 宽度 或 高 度 的 百分比 放置 背景 图 像 
[GAU 该 属性 用 于 设置 背景 图 像 顶 部 显示 

|i 该 属性 用 于 设置 背景 图 像 居中 显示 

[5Gtom 该 属性 用 于 设置 背景 图 像 底部 显示 

IGLLLLLLLLLLLU 该 属性 用 于 设置 背景 图 像 居 左 显 示 

[AOL 该 属性 用 于 设置 背景 图 像 居 右 显示 


定位 网 页 中 的 背景 图 像 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-5-4.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-5-4.mp4 












[ES 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-5-4.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-108 所 示 。 在 浏览 器 中 预览 页 面 ， 可 以 看 到 网 页 的 效果 ， 如 图 10-109 所 示 。 








图 10-108 图 10-109 


贡 % 转换 到 外 部 CSS 样式 表 文 件 中， 找到 名 为 #box 的 CSS 样式 ， 添 加 背景 图 像 和 背景 图 像 平 
铺 的 设置 代码 ， 如 图 10-110 所 示 。 保 存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 该 网 页 
元 素 设置 背景 图 像 的 效果 ， 如 图 10-111 所 示 。 





box 也 
width: 966px; 
height: 696px; 
margin: 9px auto; 
background-jimage: url(../images/1905401.j 
background-repeat: no-repeat; 








图 10-110 图 10-111 


5 转换 到 外 部 样式 表 文件 中 ， 在 名 为 #box 的 CSS 样式 中 添加 background-position 属性 设 
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置 代 码 ， 如 图 10-112 所 示 。 保 存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 使 用 绝对 值 对 背 
景 图 像 进行 定位 的 效果 ， 如 图 10-113 所 示 。 





box { 
width: 969px; 
height: 666px; 
margin: Opx auto; 
background-image: urL(../jmages/195461.jpg)] 
background-repeat: no-repeat; 
background-position: 369px QOpx; 











图 10-112 图 10-113 


区 转换 到 外 部 样式 表 文 件 中 ,在 名 为 #box 的 CSS 样式 中 修改 background-position 属性 值 ， 
如 图 10-114 所 示 。 保 存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 所 设置 的 背景 图 像 定位 效 
果 ， 如 图 10-115 所 示 。 





Fox Tt I'M A DESIGNER 
width: 900px; 
height: 600px; 一 - 
margin: 9px auto; 
background-image: urL(../jmages/165461.jpg)]| 
background-repeat: no-repeat; 
background-position: right bottom; 














图 10-114 图 10-115 


background-position 属性 的 默认 值 为 top left， 它 与 0% 0% 是 一 样 的 。 与 
background-repeat 属性 相似 ， 该 属性 的 值 不 从 包含 的 块 继承 。background- 
position 属性 可 以 与 background-repeat 属性 一 起 使 用 ， 在 页 面 上 水 平 或 者 垂直 
放置 重复 的 图 像 。 





对 于 页 面 中 设置 的 背景 图 像 ， 默 认 情 况 下 在 浏览 器 中 预览 时 ， 当 拖 动 滚动 条 ， 页 面 背景 会 自动 跟 
随 滚动 条 的 下 拉 操 作 与 页 面 的 其 余部 分 一 起 滚动 。 在 CSS 样式 表 中 ， 针 对 背景 元 素 的 控制 ， 提 供 了 
background-attachment 属性 ， 通 过 对 该 属性 的 设置 可 以 使 页 面 的 背景 不 受 滚动 条 的 限制 ， 始 终 保 
持 在 固定 位 置 。background-attachment 属性 的 语法 格式 如 下 。 


@216 


background-attachment: scroll | fixed; 


background-attachment 属性 的 属性 值 说 明 如 表 10-20 所 示 。 
表 10-20 background-attachment 属性 的 属性 值 说 明 


上 全 说 明 


scroll 该 属性 是 默认 值 ， 当 页 面 滚动 时 ， 页 面 背景 图 像 会 自动 跟随 滚动 条 的 下 拉 操 作 与 页 面 的 
其 余部 分 一 起 滚动 
fixed 该 属性 值 用 于 设置 背景 图 像 在 页 面 的 可 见 区 域 ， 也 就 是 背景 图 像 固定 不 动 


固定 网 页 中 的 背景 图 像 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-5-5.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-5-5.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-5-5.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-116 所 示 。 在 浏览 器 中 预览 页 面 ， 可 以 看 到 鼠标 拖 动 滚动 条 时 ， 背 景 图 像 会 跟着 
滚动 ， 如 图 10-117 所 示 。 








图 10-116 图 10-117 


葬 二 ”转换 到 外 部 CSS 样式 表 文 件 中 ， 在 名 为 body 的 CSS 样式 中 添加 background-attachment 
属性 设置 代码 ， 如 图 10-118 所 示 。 保 存 外 部 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 无 论 如 何 
拖 动 滚动 条 ， 背 景 图 像 的 位 置 始终 是 固定 的 ， 如 图 10-119 所 示 。 











font-family: Arial; 

font-size: 14px; 

color: #CCC; 

line-height: 25px; 

background-color: #606090; 

background-image: url(../images/105561.jpg) 1 
background-repeat: repeat-x; 


background-attachment: fixed; 














图 10-118 图 10-119 
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网 页 中 的 颜色 搭配 可 以 更 好 地 吸引 浏览 者 的 目光 ， 在 CSS 3 中 新 增 了 几 种 网 页 中 定义 颜色 的 方 
法 ， 下 面 依次 进行 介绍 。 


RGBA 是 在 RGB 的 基础 上 多 了 控制 Alpha 透明 度 的 参数 ，RGBA 颜色 定义 语法 如 下 。 


rgba (r,g,b,<opacity>); 


R.G 和 B 分 别 表示 红色 ,绿色 和 蓝 色 3 种 原色 所 占 的 比重 , RG 和 B 的 值 可 以 是 正 整数 或 百分数 ， 
正 整数 值 的 取 值 范围 为 0~255， 百 分 比 数值 的 取 值 范围 为 0%~100% ， 超 出 范围 的 数值 将 被 截至 其 
最 近 的 取 值 极限 。 注 意 ， 并 非 所 有 浏览 器 都 支持 百分数 值 。 第 4 个 属性 值 <opacity> 表示 不 透明 度 ， 
取 值 范围 为 0~1。 


使 用 RGBA 方式 设置 背景 颜色 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-6-1.html ”视频 ; 光盘 \ 视 频 \ 第 10 章 \10-6-1.mp4 


I 执行 “文件 > 打开 ”命令 ,打开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-6-1.html”， 可 以 看 到 
页 面 效 果 ， 如 图 10-120 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 #box 的 
CSS 样式 ， 如 图 10-121 所 示 。 


noo 吉 





Cr 








#box { 
position: absolute; 
width: 241lpx; 
height: 279px; 
right: 89px; 
top: 100px; 
padding: 36px; 
background-color: #000; 


i 











图 10-120 图 10-121 


[IE 王 ”在 名 为 #box 的 CSS 样式 代码 中 修改 背景 颜色 的 设置 ， 并 使 用 RGBA 颜色 定义 方法 ， 如 
10-122 所 示 。 保 存 页 面 并 保存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 元 素 半 透 明 背 景 
色 效 果 ， 如 图 10-123 所 示 。 


人 939218 








box { 
position: absolute; 
width: 241px; 
height: 279px; 
right: 80px; 
top: 100px; 
padding: 36px; 
background-color: rgba(0,0,0,0.4);| 














图 10-122 图 10-123 


HSL 是 一 种 工业 界 内 广泛 使 用 的 颜色 标准 ， 通 过 对 色调 ( H ) 、 饱 和 度 ( S ) 和 亮度 (L)3 个 
颜色 通道 的 改变 ， 以 及 它们 相互 之 间 的 去 加 来 获得 各 种 颜色 。CSS 3 中 新 增 了 HSL 颜色 设置 方式 ， 
在 使 用 HSL 方法 设置 颜色 时 ， 需 要 定义 3 个 值 ， 分 别 是 色调 ( H ) 、 饱 和 度 ( S ) 和 亮度 (L) 。 
HSL 颜色 定义 语法 如 下 。 


hsl (<length>, <percentage>, <percentage>); 
HSL 的 相关 属性 值 说 明 如 表 10-21 所 示 。 
表 10-21 HSL 的 相关 属性 值 说 明 


属性 值 | 说 明 


表示 Hue ( 色调) ，0 (或 360 ) 表示 红色 ，120 表示 绿色 ，240 表示 蓝 色 ， 当 然 也 可 
以 取 其 他 的 数值 来 确定 其 他 颜色 


[ECSTI5OS UL 表示 Saturation ( 饱和 度 ) ， 取 值 为 0% ~ 100% 之 间 的 值 
a6 表示 Lightness (亮度 ) ， 取 值 为 0% ~ 100% 之 间 的 什 


HSLA 是 HSL 颜色 定义 方法 的 扩展 ， 在 色相 、 饱 和 度 、 亮 度 三 要 素 的 基础 上 增加 了 不 透明 度 的 
设置 。 使 用 HSLA 颜色 定义 方法 , 能 够 灵活 地 设置 各 种 不 同 的 透明 效果 。HSLA 颜色 定义 的 语法 如 下 。 


hsla (<length>,<percentage>, <percentage>, <opacity>); 


前 3 个 属性 与 HSL 颜色 定义 方法 的 属性 相同 ， 第 4 个 参数 即 用 于 设置 颜色 的 不 透明 度 ， 取 值 范 
围 为 0~1 之 间 ， 如 果 值 为 0， 表 示 颜 色 完全 透明 ; 如 果 值 为 1， 则 表示 颜色 完全 不 透明 。 


使 用 HSLA 方式 设置 背景 颜色 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-6-3.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-6-3.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-6-3.html”， 可 以 看 到 
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页 面 效果 ， 如 图 10-124 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 #box 的 
CSS 样式 ， 如 图 10-125 所 示 。 








Ebox { 
position: absolute; 
width: 241px; 
height: 279px; 
right: 80px; 
top: 100px; 
padding: 36px; 
background-color: #69111A; 








= 





图 10-124 图 10-125 





本 在 名 为 #box 的 CSS 样式 中 修改 背景 颜色 的 设置 ， 使 用 HSL 颜色 定义 方法 ， 如 图 10-126 
所 示 。 保 存 页 面 并 保存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 所 设置 的 背景 色 效 果 ， 如 
图 10-127 所 示 。 




















Fbox + 
position: absolute; 
width: 241px; 
height: 279px; 
right: 80px; 
top: 100px; 
padding: 36px; 
background-color: hsl(219,65%,10%);| 
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图 10-126 图 10-127 


葬 3 蜀 转换 到 外 部 样式 表 文件 中 ， 在 名 称 为 #box 的 CSS 样式 中 修改 背景 颜色 的 设置 ， 如 图 
10-128 所 示 。 保 存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 所 设置 的 透明 背景 色 效 果 ， 如 
10-129 所 示 。 





box 工 
position: absolute; 
width: 241px; 
height: 279px; 
right: 86px; 
top: 106px; 
padding: 30px; 
background-color: hsla(210,65%,16%,0.7)]| 














图 10-128 图 10-129 
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opacity 属性 用 来 设置 一 个 元 素 的 透明 度 ， 能 够 使 页 面 元 素 呈 现 透 明 效果 ， 并 且 可 以 通过 具体 的 
数值 设置 透明 的 程度 。opacity 属性 的 语法 格式 如 下 。 


opacity: <length> | inherit; 


opacity 属性 的 属性 值 说 明 如 表 10-22 所 示 。 
表 10-22 opacity 属性 的 属性 值 说 明 


[属性 值 | 说 有明 
[NU 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 不 可 以 为 负 值 ， 默 认 值 为 1 
[SR 默认 继承 ， 继 承 父 级 元 素 的 opacity 属性 设置 


opacity 属性 取 值 为 1 的 元 素 完全 不 透明 ， 反 之 ， 取 值 为 0 是 完全 透明 的 ，0~1 之 间 的 任何 值 都 
表示 该 元 素 的 透明 度 。 


设置 网 页 元 素 的 半 透 明 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 10 章 \10-6-4.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-6-4.mp4 


OI 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-6-4.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-130 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 .pic01 
的 类 CSS 样式 ， 如 图 10-131 所 示 。 


CE Ta 有， 以， WarE5sEmrahtn 和 ， 失 
ee Er 








Lpicol 
opacity: 0.3] 


图 10-130 图 10-131 


国 Vz ”返回 设计 视图 ， 选 中 页 面 中 插入 的 图 像 ， 在 “属性 ”面板 的 “类 ”下 拉 列 表 框 中 选择 刚 定义 
的 pic01 样式 应 用 ， 如 图 10-132 所 示 。 保 存 页 面 并 保存 外 部 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 
可 以 看 到 半 透 明 图 像 的 效果 ， 如 图 10-133 所 示 。 
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图 10-132 图 10-133 


[EEaE 王 转换 到 外 部 样式 表 文件 中 ， 创 建 名 为 .pic02 的 类 CSS 样式 ， 如 图 10-134 所 示 。 返 回 设计 
视图 ， 为 页 面 中 相应 的 图 像 应 用 名 为 pic02 的 类 CSS 样式 ， 保 存 页 面 并 保存 外 部 样式 表 文 件 ， 在 浏 
览 器 中 预览 页 面 ， 可 以 看 到 半 透 明 图 像 的 效果 ， 如 图 10-135 所 示 。 








-pico2 { 
opacity: ©.8; 








图 10-134 图 10-135 


如 果 在 CSS 样式 中 设置 颜色 值 为 transparent， 则 会 使 背景 颜色 、 文 字 颜 色 或 边框 颜色 等 设 
置 为 完全 透明 。 在 CSS 1 中 ， 只 能 在 background-color 属性 中 设置 transparent 属性 值 。 在 CSS 2 
中 ， 可 以 在 background-color 和 border-color 属性 中 设置 transparent 属性 值 。 在 CSS 3 中 ， 
可 以 在 一 切 指定 颜色 值 的 属性 中 设置 transparent 属性 值 。 现 在 ，transparent 属性 值 已 经 得 到 
Firefox、Chrome、Safari、Opera 和 |E 等 浏览 器 的 支持 。 


在 以 前 ， 必 须 使 用 图 像 来 实现 渐变 效果 。 但 是 在 CSS 3 中 新 增 了 渐变 设置 属性 gradients， 通 
过 该 属性 可 以 在 网 页 中 实现 渐变 颜色 填充 的 效果 ， 避 免 了 过 多 地 使 用 渐变 图 片 所 带 来 的 麻烦 ， 而 且 在 
放大 页 面 的 情况 下 一 样 过 渡 自 然 。 

在 网 页 中 可 以 实现 线性 渐变 和 径 向 渐变 两 种 方式 的 渐变 填充 效果 ， 但 目前 浏览 器 还 没有 统一 的 标准 
对 渐变 gradients 属性 提供 支持 , 所 以 目前 还 只 能 使 用 浏览 器 提供 的 私有 化 属性 来 实现 渐变 颜色 填充 效果 。 
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3》1. 基于 Webkit 内 核 的 实现 
基于 Webkit 内 核 的 线性 渐变 ， 语 法 如 下 。 


-webkit-gradient ( linear,<point>,<point>,from(<color>),to(<color>) [, color- 


stop(<percent>, <color>)]*) 


基于 Webkit 内 核 线性 渐变 属性 值 说 明 如 表 10-23 所 示 。 


表 10-23 基于 Webkit 内 核 线性 渐变 属性 值 说 明 
说 了 明 









”属性 值 | 
[nean 表示 线性 浙 交 类 型 


定义 渐变 的 起 始点 和 结束 点 : 第 一 个 表示 起 始点 ， 第 二 个 表示 结束 点 。 该 坐标 点 的 取 值 ， 
支持 数值 、 百 分 比 和 关键 字 , 如 (0.5, 0.5) 、(50%，50%) 、(left, top ) 等 。 关 
键 字 包 括 : 定义 横 坐标 的 left 和 right， 定 义 纵 坐标 的 top 和 bottom 


kao 表示 任意 CSS 颜色 值 
[Percentz 表示 百分比 值 用 于 确定 起 始点 和 结束 点 之 间 的 某 个 位 置 


[CORE 定义 起 给 点 的 项 色 


[CGO 定义 结束 点 的 虎 色 
[COGTsSIO50 | 可 选 函 数 ， 在 渐变 中 多 次 添加 过 滤 颜 色 ， 可 以 实现 多 种 颜色 的 渐变 


》2. 基于 Gecko 内 核 的 实现 
基于 Gecko 内 核 的 线性 渐变 ， 语 法 如 下 。 


-moz-linear-gradient ( [ <point> || <angle>,] ? <color> [, (<color>) 


[<percent>]?]*,<color>) 


基于 Gecko 内 核 线性 渐变 属性 值 说 明 如 表 10-24 所 示 。 


表 10-24 ”基于 Gecko 内 核 线性 渐变 属性 值 说 明 
说 明 

[| 定义 渐变 的 起 始点 ， 该 坐标 的 取 值 支持 数值 、 百 分 比 和 关键 字 ， 关 键 字 包 括 : 定义 横 坐 

标的 left、center 和 right， 定 义 纵 坐 标的 top、center 和 bottom。 上 默认 坐标 为 (top 

center ) 。 当 指定 一 个 值 时 ， 另 一 个 值 默 认为 center 

kaole 表示 渐变 使 用 的 CSS 颜色 什 

anaie> 时 定义 线性 渐变 的 角度 ， 单 位 可 以 是 deg (角度 ) 、grad (梯度 ) 、rad (弧度 ) 

RparcanS 表示 百分比 值 ， 用 于 确定 起 始点 和 结束 点 之 间 的 某 个 位 置 










这 里 没有 函数 作为 参数 ， 可 以 直接 在 某 个 百分比 位 置 添加 过 渡 颜 色 。 第 一 个 颜 
国 | 色 值 为 渐变 开始 的 颜色 ， 最 后 一 个 颜色 值 为 渐变 结束 的 颜色 。 基 于 Gecko 内 核 的 线 
性 渐变 的 实现 ， 比 较 符 合 W3C 语法 标准 。 
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为 网 页 设置 线性 渐变 背景 颜色 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-7-1.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-7-1.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-7-1.html”， 可 以 看 到 
页 面 效 果 ， 如 图 10-136 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 ， 找 到 名 为 body 的 
CSS 样式 ， 如 图 10-137 所 示 。 


欢迎 来 到 几何 工厂 





ody 王 
font-family: 微软 雅 黑 ; 
font-size: 14px; 
color: #FFF; 
line-height: 39px; 
background-color: rgb(219,190,57)} 








su |} 
图 10-136 图 10-137 
E 权 一 册 除 background-color 属性 设置 代码 ， 并 添加 线性 渐变 设置 代码 ， 如 图 10-138 所 示 。 保 


存 外 部 CSS 样式 文件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 所 设置 的 从 上 至 下 的 线性 渐变 背景 
效果 ， 如 图 10-139 所 示 。 












dy 工 
font-family: 微软 雅 黑 ; 
font-size: 14px; 
Color: #FFF; 
line-height: 30px; 
* 基 于 Webkit 内 核 的 实现 * 


background: -webkit-gradient (linear, left top, left 
lbottom, rt to(s0F0)): 
rT rE 


background: -moz- linear-gradient (top,#f90,#06f0); 








四 





图 10-138 图 10-139 


此 处 是 实现 了 基于 Webkit 和 Gecko 两 种 内 核 浏览 器 的 线性 渐变 ， 其 中 基于 
Gecko 内 核 的 渐变 实现 ， 应 用 了 其 默认 的 设置 : 当 不 设置 起 点 和 弧度 方向 时 ， 默 认 
的 是 从 上 至 下 的 渐变 ，IE 浏览 器 显示 不 出 效果 ， 在 Chrome 或 Firefox 浏览 器 中 可 
以 显示 效果 。 





[本 王 转换 到 外 部 样式 表 文件 中 ， 修 改 刚刚 所 设置 的 渐变 颜色 代码 ， 如 图 10-140 所 示 。 保 存 外 部 
样式 表 文 件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 所 设置 的 从 左 至 右 的 线性 渐变 背景 效果 ， 如 
10-141 所 示 。 
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yt 

font-family: 微软 雅 黑 ; 

font-size: 14px; 

color: #FFF; 

ine es 30px; 
基于 webkit 内 核 





background: -moz- Tinear- gradient(left, #f90, #0f0); 





图 10-140 







图 10-141 


OR 转换 到 外 部 样式 表 文 件 中 ， 修 改 刚刚 所 设置 的 渐变 颜色 代码 ， 如 图 10-142 所 示 。 保 存 外 部 
CSS 样式 文件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 所 设置 的 从 左上 角 至 右 下 角 的 线性 渐变 背 


景 效 果 ， 如 图 10-143 所 示 。 










yt 

font-famity: 微软 雅 黑 ; 
font-size: 14px; 
color: #FFF; 





:-webkit-gradient(Linear, left top,right 
et ed) ts 
核 的 实 





ee -moz- es -gradient(left top,#f90,#0f0) | 








图 10-142 





图 10-143 


[gg 旺 转换 到 外 部 样式 表 文 件 中 ， 修 改 刚刚 所 设置 的 渐变 颜色 代码 ， 如 图 10-144 所 示 。 保 存 外 部 
CSS 样式 文件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 所 设置 的 多 种 颜色 的 线性 渐变 背景 效果 ， 


如 图 10-145 所 示 。 





yt 
font-famity: 微软 雅 黑 ; 


font-size: 14px; 


color: #FFF; 
Wipe -height: 30px; 
基于 Webkit 内 核 的 实现 * 


background: -webkit-gradient(linear, left top,right top, 
rom(#f90) , te color-stop(50%,yellow)); 
* 基 于 Gecko 内 核 的 于 > 
background: -moz- linear-gradient (left,#f90,yellow, #0f0) | 








图 10-144 





图 10-145 


从 此 案例 可 以 看 出 ， 基 于 Gecko 内 核 的 渐变 实现 比较 容易 ， 但 不 易 理解 ; 基于 
Webkit 内 核 的 渐变 实现 代码 较 长 ， 但 逻辑 层次 比较 清晰 。 
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》1. 基于 Webkit 内 核 的 实现 
基于 Webkit 内 核 的 径 向 渐变 ， 语 法 如 下 。 


-webkit-gradient ( radial [,<point>,<radius>] {2},from(<color>),to(<color>) [, 


color-stop(<percent>, <color>)]*) 


基于 Webkit 内 核 径 向 渐变 属性 值 说 明 如 表 10-25 所 示 。 


表 10-25 基于 Webkit 内 核 径 向 渐变 属性 值 说 明 
说 了 明 












i Rl| 
硬是 表示 径 向 浙 变 类 型 

区 定义 渐变 的 起 始 圆 的 圆心 坐标 和 结束 圆 的 圆心 坐标 。 该 坐标 点 的 取 值 ， 支 持 数值 、 百 分 
比 和 关键 字 ， 如 ( 0.5，0.5) 、( 50%，50% ) 、 (left，top ) 等 。 关 键 字 包括 : 定义 
横 坐 标的 left 和 right， 定 义 纵 坐标 的 top 和 bottom 

[SOUSAULLLLU 表示 加 的 半径 ， 定 义 起 始 圆 的 半径 和 结束 圆 的 半径 。 默 认为 元 素 尺寸 的 一 半 
[CCaGra | 表示 任意 CSS 颜色 值 

a 表示 百分比 值 ， 用 于 确定 起 始点 和 结束 点 之 间 的 某 个 位 置 

[GAO 定义 起 始 加 的 颜色 


[CGO 定义 结束 园 的 其 色 
[CGO 可 选 函数 ， 在 渐变 中 多 次 添加 过 滤 颜 色 ， 可 以 实现 多 种 颜色 的 渐变 


》2. 基于 Gecko 内 核 的 实现 
基于 Gecko 内 核 的 径 向 渐变 ， 语 法 如 下 。 


-moz-linear-gradient ( [ <point> || <angle>,] ? <shape> || <radius>] ? <color> [, 


(<color>) [<percent>]?]*,<color>) 


基于 Gecko 内 核 径 向 渐变 属性 值 说 明 如 表 10-26 所 示 。 


表 10-26 基于 Gecko 内 核 径 向 渐变 属性 值 说 明 
| 说 了 明 


定义 渐变 的 起 始点 ， 该 坐标 的 取 值 支持 数值 、 百 分 比 和 关键 字 ， 关 键 字 包括 : 定义 横 坐 
标的 left、center 和 right， 定 义 纵 坐 标的 top、center 和 bottom。 上 默认 坐标 为 (top 












center ) 。 当 指定 一 个 值 时 ， 另 一 个 值 默认 为 center 

angieS 定义 径 向 渐变 的 角度 ， 单 位 可 以 是 deg (角度 ) 、grad (梯度 ) 、rad (弧度 ) 
[CMSREC | 定义 径 向 渐变 的 形状 ， 包 括 circle ( 圆 形 ) 和 ellipse (椭圆 形 ) ， 默 认为 ellipse 
[aaS> | 定义 加 的 半径 或 者 顶 贺 的 轴 长 度 

la6l6 表示 渐变 使 用 的 CSS 颜色 值 


[SC UL 表示 百分比 值 ， 用 于 确定 起 始点 和 结束 点 之 间 的 某 个 位 置 


这 里 没有 函数 作为 参数 ， 可 以 直接 在 某 个 百分比 位 置 添加 过 渡 颜 色 。 第 一 个 颜 
加 色 值 为 渐变 开始 的 颜色 ， 最 后 一 个 颜色 值 为 渐变 结束 的 颜色 。 基 于 Gecko 内 核 的 径 
向 渐变 的 实现 ， 比 较 符合 W3C 语法 标准 。 
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为 网 页 设置 径 向 渐变 背景 颜色 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-7-2.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-7-2.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-7-2.html”， 可 以 看 到 
页 面 效 果 ， 如 图 10-146 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 ， 找 到 名 为 body 的 
CSS 样式 ， 如 图 10-147 所 示 。 





ody 工 
font-family: 微软 雅 黑 ; 
font-size: 14px; 
color: #FFF; 
line-height: 30px; 
background-color: rgb(253,172,186) }| 











图 10-146 图 10-147 


E@E 权 一 市 除 background-color 属性 设置 代码 ， 并 添加 径 向 渐变 设置 代码 ， 如 图 10-148 所 示 。 保 
存 外 部 CSS 样式 文件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 所 设置 的 径 向 渐变 背景 效果 ， 如 图 
10-149 所 示 。 














5oqyT 

font-famity: 微软 雅 黑 ; 
font-size: 14px; 
color: #FFF; 







Em 


background: -webkit-gradient (radial, 500 460,50,560 
00 ,300, frontsfaecee) ,totsrdacbd), color-stop(ses, fbdadd)) 








图 10-148 图 10-149 


由 于 基于 Webkit 和 Gecko 的 径 向 渐变 实现 方法 不 同 ， 复 杂 的 渐变 很 难 同 时 实 
现 。 例 如 ， 使 用 基于 Webkit 的 -webkit-gradient()， 可 以 轻松 实现 放射 效果 ; 基 
于 Gecko 的 -moz-radial-gradient()， 则 可 以 轻松 实现 椭圆 效果 。 正 因为 这 些 无 
法 统一 的 问题 存在 ， 径 向 渐变 在 实际 使 用 过 程 中 比较 受 限制 。 





在 CSS 3 中 新 增加 了 有 关 网 页 背景 控制 的 几 种 属性 ， 下 面 分 别 对 这 几 种 新 增 的 背景 设置 属性 进 
行 介绍 。 


27©@ 


在 CSS 3 中 ， 可 以 通过 background 属性 为 一 个 元 素 应 用 一 个 或 多 个 图 片 作为 背景 。 代 码 和 
CSS 2 中 一 样 ， 只 需要 用 逗号 来 区 分 各 个 图 片 。 第 一 个 声明 的 图 片 定位 在 元 素 顶 部 ， 其 他 的 图 片 依 
次 在 其 下 排列 。 设 置 多 背景 图 像 的 语法 如 下 。 


background: [background-image] | [background-origin] | [background-clip] | 


[background-repeat] | [background-size] | [background-position]; 


设置 多 背景 图 像 的 属性 值 说 明 如 表 10-27 所 示 。 
表 10-27 设置 多 背景 图 像 的 属性 值 说 明 


有 | 说 明 
[<backgroundsimage> 指定 对 象 的 背景 图 像 
[GaCKOTOUnUSOTiOiT | 指定 背景 的 原点 位 置 ， 属 于 CSS 3 新 增 的 属性 
[ESGCKOTOUnUSCip | 指定 背景 的 显示 区 域 ， 属 于 CSS 3 新 增 的 属性 
[SaCKOTOUndsrepeat | 设置 对 象 的 背景 图 像 是 否 及 如 何 重复 铺 排 
[SCKOTOUndSSIER | 指定 背景 图 片 的 大 小 ， 属 于 CSS 3 新 增 的 属性 
[<backgroundsposiion> 设置 背景 图 像 位 置 


如 果 定义 多 重 背 景 图 像 ， 则 需要 使 用 逗号 隔 开 各 个 背景 图 像 设置 ， 如 果 使 用 子 属性 直接 定义 ， 那 
么 各 个 子 属性 也 用 逗号 对 应 依次 隔 开 。 


为 网 页 设置 多 个 背景 图 像 
最 终 文件 : 光盘 \ 最终 文件 \ 第 10 章 \10-8-1.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-8-1.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-8-1.html”， 可 以 看 到 
页 面 效 果 ， 如 图 10-150 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 body 的 
CSS 样式 ， 如 图 10-151 所 示 。 


Carisberg body { 


Ratsing the rand Pre from bottle in bar 


| wun | font-family: 微软 雅 黑 A 
font-size: 14px; 

color: #FFF; 

line-height: 39px; 
background-color: #767676; 





pc 
图 10-150 图 10-151 


IE 玫 ”添加 background 属性 设置 代码 ， 设 置 多 个 背景 图 像 ， 如 图 10-152 所 示 。 保 存 外 部 CSS 
样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 页 面 同时 设置 多 个 背景 图 像 的 效果 ， 如 图 10-153 
所 示 。 
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ody T 
font-family: 微软 雅 黑 ; 
font-size: 14px; 

color: #FFF; 

line-height: 30px; 
background-color: #767676; 







url(../images/168162.png) no-repeat center top 
url(../images/168161.jpg) no-repeat center topj 










图 10-152 图 10-153 


此 处 同时 设置 了 3 个 背景 图 像 ， 中 间 使 用 逗号 隔 开 ， 设 置 了 不 同 的 平 铺 方式 ， 
写 在 前 面 的 背景 图 像 会 显示 在 上 面 ， 写 在 后 面 的 背景 图 像 则 显示 在 下 面 。 





以 前 在 网 页 中 背景 图 像 的 大 小 是 无 法 控制 的 ， 如 果 想 让 背景 图 像 填充 整个 页 面 背景 ， 则 需要 事先 
设计 一 个 较 大 的 背景 图 像 ， 只 能 让 背景 图 像 以 平 铺 的 方式 来 填充 页 面 元 素 。 在 CSS 3 中 新 增 了 一 个 
background-size 属性 ， 通 过 该 属性 可 以 自由 控制 背景 图 像 的 大 小 。background-size 属性 的 语法 
格式 如 下 。 


background-size: [<length> | <percentage> | auto] {1,2} | cover | contain 7 


background-size 的 相关 属性 值 说 明 如 表 10-28 所 示 。 


表 10-28 background-size 的 属性 值 说 明 
说 明 
Bia 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 以 为 负 值 
iperceniage 四 取 值 为 0% ~ 100% 之 间 的 值 ， 不 可 以 为 负 值 
ic6ver 保持 背景 图 像 本 身 的 宽 高 比 ， 将 背景 图 像 缩放 到 正好 完全 覆盖 所 定义 的 背景 区 域 
[CO 保持 背景 图 像 本 身 的 宽 高 比 ， 将 图 片 缩放 到 宽度 和 高 度 正好 适应 所 定义 的 背景 区 域 


的 宽度 和 高 度 ， 第 一 个 值 设 置 宽度 ， 第 二 个 值 设 置 高 度 ， 如 果 只 给 出 一 个 值 ， 则 第 


background-size 属性 可 以 使 用 <length> 和 <percentage> 来 设置 背景 图 像 
d 二 个 值 为 auto。 


控制 背景 图 像 的 大 小 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-8-2.html ”视频 : 光盘 \ 视 频 \ 第 10 章 \10-8-2.mp4 


I 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 10 章 \10-8-2.html”， 可 以 看 到 
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页 面 效果 ， 如 图 10-154 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 #bg 的 
CSS 样式 ， 如 图 10-155 所 示 。 














Fog T 
width: 938px; 
height: 397px; 











图 10-154 图 10-155 








四 2 添加 背景 图 像 和 背景 图 像 平 铺 方式 的 设置 代码 ， 如 图 10-156 所 示 。 保 存 外 部 样式 表 文 件 ， 
在 浏览 器 中 预览 页 面 ， 可 以 看 到 为 该 Div 设置 背景 图 像 的 效果 ， 如 图 10-157 所 示 。 











Fbg T 
width: 938px; 
height: 397px; 
background-image: url(../images/108202.jpg)’| 
background-repeat: no-repeat; 














图 10-156 图 10-157 


[王国 转换 到 外 部 CSS 样式 表 文件 中 ， 在 名 为 #bg 的 CSS 样式 代码 中 添加 background-size 
属性 ， 如 图 10-158 所 示 。 保 存 外 部 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 控制 背景 图 像 显示 
大 小 的 效果 ， 如 图 10-159 所 示 。 





Fbg T 
width: 938px; 
height: 397px; 
background-image: urL(. ./images/1698262.jpg) | 
background-repeat: no-repeat; 
background-size: 900px 95%; 














图 10-158 图 10-159 
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使 用 background-size 属性 设置 背景 图 像 的 大 小 ， 可 以 使 用 像素 或 百分比 的 
方式 指定 背景 图 像 有 大 小 。 当 使 用 百分比 值 时 ， 大 小 会 由 所 在 区 域 的 宽度 和 高 度 所 
决定 。 





默认 情况 下 ，background-position 属性 总 是 以 元 素 左 上 角 原 点 作为 背景 图 像 定位 ， 使 用 CSS 
3 中 新 增 的 background-origin 属性 可 以 改变 这 种 背景 图 像 定位 方式 ， 通 过 该 属性 可 以 大 大 改善 背景 
图 像 的 定位 方式 ， 能 够 更 加 灵活 地 对 背景 图 像 进行 定 位 。background-origin 属性 的 语法 格式 如 下 。 


background-origin: border-box | padding-box | content-box; 


background-origin 的 相关 属性 值 说 明 如 表 10-29 所 示 。 
表 10-29 background-origin 的 属性 值 说 明 


属性 值 | 说 。 明 
[ECGraere6ox 从 元 素 的 border 区 域 开始 显示 背景 图 像 
[EGG LU 从 元 素 的 padding 区 域 开始 显示 背景 图 像 
[nan 人 元素 的 center 区 域 开始 显示 背景 图 像 


在 之 前 的 部 分 浏览 器 中 ，background-origin 属性 的 取 值 可 以 为 : border、 
padding 和 content， 但 是 不 建议 使 用 ， 因 为 不 符合 最 新 的 CSS 3 规范 ， 而 且 主 流 
浏览 器 对 符合 规范 的 取 值 的 支持 更 加 良好 。 





控制 背景 图 像 开始 显示 的 原点 位 置 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 10 章 \10-8-3.html 视频: 光盘 \ 视 频 \ 第 10 章 \10-8-3.mp4 


OI 执行 “文件 > 打开” 命令， 打开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-8-3.html”， 可 以 看 到 
页 面 效 果 ， 如 图 10-160 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 #bg 的 
CSS 样式 ， 如 图 10-161 所 示 。 









bg 

width: 858px; 

height: 317px; 

padding: 26px; 

border: dashed 26px #FFF; 

background-image: url(../images/1082902.jpg)}| 
background-repeat: no-repeat; 





图 10-160 图 10-161 
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吨 畏 ”添加 background-origin 属性 设置 代码 ， 如 图 10-162 所 示 。 保 存 外 部 样式 表 文 件 ， 在 浏 
览 器 中 预览 页 面 ， 可 以 看 到 控制 背景 图 像 开始 显示 的 原点 位 置 的 效果 ， 如 图 10-163 所 示 。 





Fog 

width: 858px; 

height: 317px; 

padding: 26px; 

border: dashed 20px #FFF; 
background-image: urtL(../images/168262.jpg) | 
background-repeat: no-repeat; 
background-origin: content-box; 








图 10-162 图 10-163 


background-origin 属性 用 于 控制 背景 图 像 的 显示 区 域 ， 默 认 情况 下 ， 在 网 页 
中 设置 的 背景 图 像 都 是 以 元 素 左 上 角 的 原点 位 置 的 定位 点 进行 显示 ， 对 于 背景 图 像 
国 显示 区 域 的 控制 并 不 是 很 灵活 ， 通 过 background-origin 属性 ， 可 以 灵活 地 控制 背 
景 图 像 是 从 border 区 域 开始 显示 ， 或 从 padding 区 域 开 始 显 示 ， 还 是 从 content 
区 域 开始 显示 。 





在 CSS 3 中 新 增 了 背景 图 像 裁剪 区 域 属性 background-clip， 通 过 该 属性 可 以 定义 背景 图 像 的 
裁剪 区 域 。background-clip 属性 与 background-origin 属性 类 似 ，background-clip 属性 用 来 判 
断背 景 图 像 是 否 包含 边框 区 域 ， 而 background-origin 属性 用 来 决定 background-position 属性 定 
位 的 参考 位 置 。 

background-clip 属性 的 语法 格式 如 下 。 


background-clip: border-box | padding-box | content-box | no-clip; 


background-clip 的 相关 属性 值 说 明 如 表 10-30 所 示 。 


表 10-30 background-clip 的 属性 值 说 明 
说 明 
[EGGers5oX 从 元 素 的 border 区 域 向 外 裁剪 背景 图 像 
[EGGiios5oX 从 元 素 的 padding 区 域 向 外 裁剪 背景 图 像 
rene563 从 元 素 的 center 区 域 向 外 裁剪 背景 图 像 
maaP 下 | 与 border~box 属性 值 相同 ,从 border 区 域 向 外 裁剪 背景 图 像 


控制 背景 图 像 的 显示 区 域 
最 终 文件 :光盘 \ 最 终 文件 \ 第 10 章 \10-8-4.html 。 视频 : 光盘 \ 视 频 \ 第 10 章 \10-8-4.mp4 
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[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 10 章 \10-8-4.html”， 可 以 看 到 
页 面 效果 ， 如 图 10-164 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 10-8-4.css 文件 中 ， 找 到 名 
为 #bg 的 CSS 样式 ， 如 图 10-165 所 示 。 











F65T 
width: 858px; 
height: 317px; 
padding: 20px; 
border: dashed 26px #FFF; 
background-image: urL(. ./images/198262.jpg)j| 
background-repeat: no-repeat; 

















图 10-164 图 10-165 


苹 ”添加 background-clip 属性 设置 代码 ， 如 图 10-166 所 示 。 保 存 外 部 样式 表 文 件 ， 在 浏览 
器 中 预览 页 面 ， 可 以 看 到 对 背景 图 像 进行 裁剪 的 效果 ， 如 图 10-167 所 示 。 





height: 317px; 再 < 
， 看 你 的 “ 多 学 
人 4 
background-image: url(../images/108202.jpg);| PE 


bg + | 
width: 858px; 全 世 综 
padding: 20px; 
border: dashed 269px #FFF; 
background-repeat: no-repeat; be 
background-clip: content-box; 








有 








图 10-166 图 10-167 


提示 background-clip 属性 使 用 方法 和 background-origin 属性 一 样 ， 其 值 也 是 根据 
盒 模 型 的 结构 来 确定 的 , 这 两 个 属性 常常 会 结合 起 来 使 用 , 以 达到 对 背景 的 灵活 控制 。 





本 章 详细 地 介绍 了 CSS 样式 中 对 网 页 中 文字 和 背景 相关 元 素 进 行 控制 的 各 种 CSS 样式 属性 的 
设置 和 使 用 方法 ， 并 通过 实例 制作 使 读者 能 够 快速 地 理解 和 掌握 使 用 CSS 样式 对 网 页 中 文字 和 背景 
相关 元 素 的 控制 ， 还 介绍 了 CSS 3 中 新 增 对 文本 和 背景 的 设置 属性 ， 通 过 本 章 的 学 习 ， 读 者 能 够 灵 
活 地 运用 CSS 样式 来 控制 网 页 中 的 文字 和 背景 相关 元 素 。 
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A 
第 11 章 ”边框 与 超 链 接 设 置 国 于 


设置 和 使 用 方法 
超 链接 在 网 页 中 是 必 不 可 少 的 部 分 ， 在 浏览 网 页 时 ， 单 击 一 | 。 区 人 SESE 
张 图 片 或 者 一 段 文字 就 可 以 跳 转 到 相应 的 网 页 中 ， 这 些 功能 都 是 
通过 超 链接 来 实现 的 。 在 网 页 中 ， 超 链接 的 创建 是 很 简单 的 ， 但 rie 
是 默认 的 超 链接 效果 并 不 能 符合 所 有 网 页 外 观 的 需要 ， 本 章 通过 全 清风 
可 通过 CSS 
如 人 过 CSS 样式 设置 


有 网 页 中 的 超 链接 效果 
边框 效果 和 超 链 接 表 现 出 的 效果 更 加 美观 和 精致 。 掌握 光标 CSS 样式 属性 的 设 


置 和 使 用 方法 





通过 HTML 定义 的 元 素 边框 风格 较为 单一 ， 只 能 改变 边框 的 粗细 ， 边 框 显 示 的 都 是 黑色 ， 无 法 
设置 边框 的 其 他 样式 。 在 CSS 样式 中 ， 通 过 对 border 属性 进行 定义 ， 可 以 使 网 页 元 素 的 边框 有 更 
加 丰富 的 样式 ， 从 而 使 元 素 的 效果 更 加 美观 。 

border 属性 的 基本 语法 格式 如 下 。 














border: border-style | border-color | border-width; 


可 以 通过 CSS 样式 中 的 border-width 属性 来 设置 元 素 边框 的 宽度 ， 以 增强 边框 的 效果 。 
border-width 的 语法 格式 如 下 。 














border-width: medium | thin | thick | length; 











border-width 属性 的 相关 属性 值 说 明 如 表 11-1 所 示 。 








表 11-1 border-width 的 相关 属性 值 
说 明 






人 
Fa ,+ 
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border-top-width、border-right-width、border-bottom-width 和 border-left-width 是 
border-width 的 综合 性 属性 ， 同 样 可 以 根据 设计 的 需要 ， 利 用 这 几 种 属性 ， 可 以 对 边框 的 4 条 边 进 
行 粗细 不 等 的 设置 。 表 11-2 所 示 为 各 边框 的 宽度 属性 。 


表 11-2 各 边框 宽度 属性 
I 
es 六 竺 元 来 上 也 本 的 完 度 
[EGGGTSNGREWIGH | 设置 元 素 右边 框 的 究 度 
[EGGGE6GUHGTEsWidii 国 设置 元 素 下 边框 的 究 度 
[Te 上 设置 元 素 左 边框 的 究 度 


border-style 属性 用 于 设置 元 素 边 框 的 样式 ， 即 定义 图 片 边框 的 风格 。border-style 的 语法 格 
式 如 下 。 




















border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset 


| outset; 





border-style 属性 的 相关 属性 值 说 明 如 表 11-3 所 示 。 
表 11-3 border-style 属性 的 相关 属性 值 说 明 


四 说 
me 设置 元 未 无 边 杠 

[RSGN 与 one 相同 ,对 于 表格 ， 可 以 用 来 解决 边框 的 冲突 
[CCRCAIERE | 设置 点 汰 边框 效果 

[CSSACOIEE | 设置 虚线 边 杠 效果 

[CGI 设置 实 线 边框 效果 

[EU 设置 双 线 边框 效果 ， 双 线 宽度 等 于 border-width 的 值 
[ES 网 届 设置 3D 四 恒 边 框 效果 ， 其 效果 取决 于 border-color 的 值 
[5S 几 设置 冰 线 式 边框 效果 

[AAA me 
C07 


以 上 所 介绍 的 边框 样式 属性 还 可 以 定义 在 一 个 元 素 边框 中 ， 它 是 按照 顺 时 针 的 方向 分 别 对 边框 的 
上 、 右 、 下 、 左 进行 边框 样式 定义 的 ， 可 以 形成 样式 多 样 化 的 边框 。 
例如 下 面 所 定义 的 边框 样式 。 
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img{ 
border-style: dashed solid double dotted; 
} 


此 外 ， 根 据 网 页 页 面 设计 的 需要 ， 可 以 通过 如 表 11-4 所 示 的 属性 ， 单 独 地 对 某 一 边 的 样式 进行 
定义 。 
表 11-4 各 边框 样式 属性 


[aeserssya| 用 于 设置 元 素 左边 杠 的 样式 


在 定义 页 面 元 素 的 边框 时 ， 不 仅 可 以 对 边框 的 样式 进行 设置 ， 为 了 突出 显示 边框 的 效果 ， 
还 可 以 通过 CSS 样式 中 的 border-color 属性 来 定义 边框 的 颜色 。border-color 的 语法 格式 
如 下 。 


border-color: 颜色 值 ; 


border-color 属性 的 颜色 值 设 置 ， 可 以 使 用 十 六 进 制 和 RGB 等 各 种 方式 进行 设置 。 
border-color 与 border-style 的 属性 相似 ， 它 可 以 在 为 边框 设置 一 种 颜色 的 同时 ， 也 可 以 通过 
如 表 11-5 所 示 的 属性 为 边框 的 4 条 边 分 别 设 定 不 同 的 颜色 。 


表 11-5 各 边框 颜色 属性 
ER 说 。 明 
[EGGraerstopscolor “用 于 设置 元 素 上 边框 的 颜色 
border~right=color “| 用 于 设置 元 素 右边 框 的 颜色 
[5Grdersbotomiscolor | 用 于 设置 元 素 下 边框 的 颜色 
[Gradersieftscolor | 用 于 设置 元 素 左边 框 的 颜色 


为 网 页 元 素 添加 边框 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 11 章 \11-1-3.html 。 视频 : 光盘 \ 视 频 \ 第 11 章 \11-1-3.mp4 











[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 11 章 \11-1-3.html”, 效果 如 图 11-1 所 示 。 
转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 .pic01 的 类 CSS 样式 ， 如 图 11-2 所 示 。 


@@236 























-picgl { 
border: Spx solid #FFF; 
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图 11-1 图 11-2 


[2 返回 设计 视图 中 ， 选 中 相应 的 图 片 ， 为 其 应 用 名 为 pic01 的 类 CSS 样式 , 如 图 11-3 所 示 。 
完成 该 CSS 样式 的 应 用 ， 可 以 看 到 图 片 的 边框 效果 ， 如 图 11-4 所 示 。 









图 11-3 图 11-4 


E@E 玉 ”转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 .pic02 的 类 CSS 样式 ， 如 图 11-5 所 示 。 返 回 
设计 视图 中 ， 选 中 相应 的 图 片 ， 为 其 应 用 名 为 pic02 的 类 CSS 样式 ， 效 果 如 图 11-6 所 示 。 








-pico2 { 
border-top: solid Spx #FFF; 
border-right: dashed Spx #333; 
border-bottom: dashed Spx #333]| 
border-left: solid Spx #FFF; 








图 11-5 图 11-6 





本 一 使 用 相同 的 制作 方法 ， 为 网 页 中 其 他 相同 的 图 片 应 用 相应 的 类 CSS 样式 ， 效 果 如 图 11-7 
所 示 。 保存 页 面 并 保存 外 部 CSS 样式 表 文件 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 为 图 片 添加 边框 的 效果 ， 
如 图 11-8 所 示 。 
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图 11-7 图 11-8 


图 片 的 边框 属性 可 以 不 完全 定义 ， 仅 单独 定义 宽度 与 样式 ， 不 定义 边框 的 颜色 ， 
加 通过 这 种 方法 设置 的 边框 ， 默 认 颜色 是 黑色 。 如 果 单独 定义 宽度 与 样式 ， 图 片 边框 
也 会 有 效果 ， 但 是 如 果 单独 定义 颜色 ， 图 片 边框 不 会 有 任何 效果 。 








在 CSS 3 之 前 ， 页 面 边框 效果 比较 单调 ， 通 过 border 属性 只 能 设置 边框 的 粗细 、 样 式 和 颜色 ， 
如 果 想 实现 更 加 丰富 的 边框 效果 ， 只 能 事先 设计 好 边框 图 片 ， 然 后 通过 使 用 背景 或 直接 插入 图 片 的 方 
式 来 实现 。 在 CSS 3 中 新 增 了 3 个 有 关 边 框 设 置 的 属性 ， 分 别 是 border-colors、order-radius 和 
border-image， 通 过 这 3 个 新 增 的 边框 属性 能 够 实现 更 加 丰富 的 边框 效果 。 





border-colors 属性 可 以 用 来 设置 对 象 边框 的 颜色 ， 在 CSS 3 中 增强 了 该 属性 的 功能 。 如 果 设 
置 了 border 的 宽度 为 Npx， 那 么 就 可 以 在 这 个 border 上 使 用 NN 种 颜色 ,每 种 颜色 显示 1px 的 宽度 。 
如 果 所 设置 的 border 的 宽度 为 10 像素 ， 但 只 声明 了 5 或 6 种 颜色 ， 那 么 最 后 一 个 颜色 将 被 添加 到 
剩 下 的 宽度 。 

border-colors 语法 格式 如 下 。 


border-colors: [<color> | transparent] {1,4} 


border-colors 属性 的 属性 值 说 明 如 表 11-6 所 示 。 
表 11-6 border-colors 属性 的 属性 值 说 明 


| 说 明 
[CC 问 色 值 ， 可 以 是 六 透明 颜 色 
[ASPSTGTULL | 透明 值 ， 不 设置 边框 颜色 时 ， 默 认为 该 什 


EE border-colors 属性 在 设置 时 遵循 CSS 赋值 的 方位 规则 ， 可 以 分 别 为 元 素 的 4 
个 边框 设置 颜色 。 
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border-colors 属性 本 身 可 以 定义 1~4 种 颜色 ， 用 于 设置 各 个 边框 的 颜色 ， 但 无 法 同时 为 边框 
指定 多 种 颜色 ， 因 为 这 会 导致 歧义 。border-colors 属性 派生 出 4 个 子 属性 ， 分 别 用 于 4 个 边框 颜色 
的 设置 。border-colors 属性 派生 的 子 属性 如 表 11-7 所 示 。 


表 11-7 border-colors 属性 派生 的 子 属性 
说 明 









该 属性 用 于 设置 元 素 顶部 边框 的 颜色 
该 属性 用 于 设置 元 素 右 侧 边框 的 颜色 
该 属性 用 于 设置 元 素 底部 边框 的 颜色 
borderjenecolors 该 属性 用 于 设置 元 素 左 侧 边 框 的 颜色 

这 4 个 子 属性 可 分 别 为 各 个 边框 指定 颜色 ， 可 以 指定 多 种 颜色 。 只 是 指定 多 种 颜色 的 功能 目前 仅 
Firefox 浏览 器 的 私有 属性 支持 ， 其 他 浏览 器 目前 都 不 支持 。 


实现 网 页 元 素 多 色彩 边框 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 11 章 \11-2-1.html 。 视频 : 光盘 \ 视 频 \ 第 11 章 \11-2-1.mp4 


[GE 执行 “文件 > 打开 ”命令 , 打开 页 面 "光盘 \ 源 文件 \ 第 11 章 \11-2-1.html”, 效果 如 图 11-9 所 示 。 
转换 到 外 部 CSS 样式 表 文件 中 ， 找 到 名 为 #pic img 的 CSS 样式 设置 代码 ， 如 图 11-10 所 示 。 








#pic img { 
border: solid lOpx #FFF; 








因 ) 
图 11-9 图 11-10 


葬 3 册 ”在 该 CSS 样式 代码 中 添加 border-colors 属性 设置 ， 如 图 11-11 所 示 。 保 存 页 面 ， 在 
Firefox 浏览 器 中 预览 页 面 ， 可 以 看 到 为 元 素 添加 多 彩 边 框 的 效果 ， 如 图 11-12 所 示 。 








#pic img { 
border: solid 16px #FFF; 
-moz-border-top-colors: #F36 #86C #FC3 
#69@ #939 #0663 #C93 #FFF; 
-moz-border-right-colors: #F38 #06C #FC3 
#690 #939 #663 #C93 #FFF; 
-moz-border-bottom-colors: #F36 #66C #FC3 
#690 #939 #663 #C93 #FFF; 
-moz-border-left-colors: #F3 #66C #FC3 
#698 #939 #663 #C93 #FFF; 











图 11-11 





在 该 CSS 样式 设置 中 ， 设 置 边 框 的 宽度 为 10 像素 ， 在 边框 颜色 设置 中 设置 了 
9 个 颜色 值 ， 颜 色 从 外 到 内 显示 ， 每 种 颜色 只 占有 1 像素 的 宽度 ， 最 后 一 种 颜色 将 
被 用 于 剩 下 的 宽度 。 
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在 CSS 3 之 前 , 图 像 不 能 直接 应 用 于 边框 , 设计 师 通常 把 边框 的 每 个 角 或 每 条 边 单独 做 成 一 张 图 ， 
使 用 背景 图 像 的 方式 来 模拟 实现 图 像 边 框 的 效果 。 为 了 增强 边框 效果 ，CSS 3 中 新 增 了 border- 
image 属性 ， 专 门 用 于 图 像 边框 的 处 理 ， 它 的 强大 之 处 在 于 能 够 灵活 地 分 割 图 像 ， 并 应 用 于 边框 。 
border-image 属性 的 语法 格式 如 下 。 


border-image: none | <image> [ <number> | <percentage>]{1,4}[ / <border-— 


width>{1,4} ]? [stretch | repeat | round] {0,2} 


border-image 属性 的 属性 值 说 明 如 表 11-8 所 示 。 
表 11-8 border-image 属性 值 说 明 


性 值 | 说 。 明 
IE none 为 默认 值 ， 表示 无 图 侈 

3 用 于 设置 边框 图 像 ， 可 以 使 用 绝对 地 址 或 相对 地 址 

[AUeI ULLLLLL 裁 切 边框 图 像 大 小 该 属性 值 没有 单位 ， 默 认 单位 为 像素 
parceniage> | 城 切 边框 图 像 大 小 ， 使 用 百分比 表示 

[OUTEWiGITLLLL 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 以 为 负 值 ， 用 于 设置 边框 宽度 
[GIFTGDS5HITOUTd 分 别 表示 拉 伸 、 重 复 、 平 铺 ， 其 中 stretch 是 默认 值 


为 了 能 够 更 加 方便 、 灵活 地 定义 边框 图 像 , CSS 3 允许 从 border-image 属性 派生 出 众多 子 属性 。 
border-image 的 派生 子 属性 如 表 11-9 所 示 。 


表 11-9 border-image 派生 子 属性 
说 明 










borderimage=s6urce LU 定义 边框 图 像 源 ， 即 图 像 的 地 址 ， 可 以 使 用 相对 地 址 或 绝对 地 址 
[EGGersimagessice .| 定义 边框 图 像 的 切片 设置 图 像 的 边界 向 内 的 偏 移 长 度 
[EGrdersimagesrepeat | 定义 边框 图 像 的 重复 方式 ， 包 括 拉 伸 、 重 复 和 平 铺 


orderimage=Wiath 定义 边框 图 像 的 宽度 ， 也 可 以 使 用 border-width 属性 实现 相同 的 功能 


[Edarsimagesoulset | 定义 边框 图 从 的 信 移 位 轩 


border-image 属性 语法 中 的 <number> 或 <percentage> 都 可 以 用 于 定义 边框 图 像 的 切片 ， 
也 可 以 使 用 子 属性 border-image-slice 来 定义 边框 图 像 的 切片 ， 但 子 属性 border-image-slice 没 
有 获得 任何 主流 浏览 器 的 支持 。 
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实现 网 页 元 素 添加 图 像 边 框 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 11 章 \11-2-2.html 。 视频 : 光盘 \ 视 频 \ 第 11 章 \11-2-2.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 11 章 \11-2-2.html”， 可 以 看 到 
页 面 效果 ， 如 图 11-13 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 ， 找 到 名 为 #itle 的 
CSS 样式 ， 如 图 11-14 所 示 。 





| |#title 工 
- width: 769px; 

height: 45px; 

line-height: 45px; 

text-align: center; 

margin: 20px auto 29px auto; 














图 11-13 图 11-14 


EE 玉 在 该 CSS 样式 代码 中 添加 border-width 属性 和 border-image 属性 的 设置 代码 ， 如 
11-15 所 示 。 在 这 里 所 设置 的 边框 图 像 是 一 个 比较 小 的 图 像 ， 效 果 如 图 11-16 所 示 。 


#title { 
width: 760px; 
height: 45px; 
line-height: 45px; 
text-align: center; 
margin: 20px auto 26px auto; 
border-width: © 12px; 


-webkit-border-image: url(../images/112208.gif) 
6 12 6 12 stretch stretch; 


} 


























图 11-15 图 11-16 


葬 3 罗 保存 页 面 ， 并 保存 外 部 CSS 样式 文件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 所 实现 的 
图 像 边 框 效 果 ， 如 图 11-17 所 示 。 


Courier RapidWeaverS 





图 11-17 
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在 CSS 3 之 前 ， 如 果 需 要 在 网 页 中 实现 圆 角 边 框 的 效果 ， 通 常 都 是 使 用 图 像 来 实现 ， 而 在 CSS 3 
中 新 增 了 圆 角 边框 的 定义 属性 border-radius， 通 过 该 属性 ， 可 以 轻松 地 在 网 页 中 实现 圆 角 边框 效果 。 
border-radius 属性 的 语法 格式 如 下 。 


border-radius: none | <length>{1,4} [/ <length>{1,4} ]? 


border-radius 属性 的 属性 值 说 明 如 图 11-10 所 示 。 
表 11-10 border-radius 属性 值 说 明 


| 说。 上 
[GAS none 为 默认 值 ， 夫 示人 不 设置 轩 角 效果 

用 于 设置 圆 角 度数 值 , 由 浮 点 数字 和 单位 标识 符 组 成 , 不 可 以 设置 为 负 值 。 该 值 分 为 两 组 ， 
每 组 可 以 有 1 ~ 4 个 值 。 第 一 组 为 水 平 半 径 ， 第 二 组 为 垂直 半径 ， 如 果 第 二 组 省 略 ， 则 
默认 等 于 第 一 组 的 值 





border-radius 属性 又 针对 边框 的 4 个 角 ， 派 生出 4 个 子 属性 ， 如 表 11-11 所 示 。 
表 11-11 border-radius 派生 子 属性 


> 说 明 
[5Grderstopsleftsradius 该 子 属性 用 于 设置 元 素 左上 角 的 贺 角 
[ECGrderstOpETighEETSdiUS | 该 子 属性 用 于 设置 元 素 右上 角 的 贺 角 
[GraderEOoHOTiIGRETSdUS | 该 子 属性 用 于 设置 元 素 左下 角 的 贺 角 
LEGrdersbotomerightcradiusS | 该 子 属性 用 于 设置 元 素 右 下 角 的 圆 角 


如 果 元 素 边框 的 4 个 圆 角 的 半径 各 不 相同 ， 使 用 子 属性 分 别 单独 设置 每 个 圆 角 ， 是 一 种 直接 而 有 
效 的 方法 。 











在 网 页 中 实现 圆 角 边 框 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 11 章 \11-2-3.html 。” 视频 : 光盘 \ 视 频 \ 第 11 章 \11-2-3.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 11 章 \11-2-3.html”， 效 果 如 
11-18 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 #menu 的 CSS 样式 设 





#menu { 
margin-top: 40px; 
width: 636px; 
height: 34px; 
font-size: 14px; 
font-weight: bold; 
line-height: 34px; 
background-color: #F2F2F2; 
border: solid 2px #FFF; 
float: left; 











图 11-19 
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吨 畏 ”在 该 CSS 样式 代码 中 添加 圆 角 边框 的 CSS 样式 设置 代码 ， 如 图 11-20 所 示 。 保 存 页 面 ， 
并 保存 外 部 CSS 样式 文件 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 所 实现 的 圆 角 边框 效果 , 如 图 11-21 所 示 。 


#menu { 
margin-top: 40px; 
width: 636px; 
height: 34px; 
font-size: 14px; 
font-weight: bold; 
line-height: 34px; 
background-color: #F2F2F2; 
border: solid 2px #FFF; 
float: left; 


border-radius: 190px; 














} 





图 11-20 图 11-21 


border-radius 属性 本 身 又 包含 4 个 子 属性 ， 当 为 该 属性 赋 一 组 值 的 时 候 ， 将 
遵循 CSS 的 赋值 规则 。 从 border-radius 属性 语法 可 以 看 出 ， 其 值 也 可 以 同时 包 
含 2 个 值 、3 个 值 或 4 个 值 ， 多 个 值 的 情况 使 用 空格 进行 分 隔 。 





辐 畏 ”返回 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 #pic 的 CSS 样式 ， 在 该 CSS 样式 中 添加 圆 角 边 
框 的 CSS 样式 设置 代码 ， 如 图 11-22 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预 
览 页 面 ， 可 以 看 到 所 实现 的 圆 角 边框 效果 ， 如 图 11-23 所 示 。 





#pic { 
background-color: #FFF; 
padding: 20px; 
border-radius: 30px Opx 30px Opx; 

















图 11-22 图 11-23 


第 1 个 值 是 水 平 半 径 值 。 如 果 第 2 个 值 省 略 ， 则 它 等 于 第 1 个 值 ， 这 时 这 个 角 
就 是 一 个 1/4 圆 角 。 如 果 4 个 角 中 任意 1 个 角 的 属性 值 为 0， 则 该 角 为 矩形 ， 而 不 
会 是 圆 角 。 该 属性 所 设置 的 属性 值 不 允许 为 负 值 。 
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对 于 网 页 中 超 链接 文本 的 修饰 ， 通 常 可 以 采用 CSS 样式 伪 类 。 伪 类 是 一 种 特殊 的 选择 器 ， 能 被 
浏览 器 自动 识别 。 其 最 大 的 用 处 是 在 不 同 状态 下 可 以 对 超 链接 定义 不 同 的 样式 效果 ， 是 CSS 本 身 定 
义 的 一 种 类 。CSS 样式 中 用 于 超 链接 的 伪 类 有 如 下 4 种 。 

:link 伪 类 : 用 于 定义 超 链 接 对 象 在 没有 访问 前 的 样式 。 
:hover 伪 类 : 用 于 定义 当 鼠 标 移 至 超 链接 对 象 上 时 的 样式 。 
:active 伪 类 : 用 于 定义 当 鼠 标 单 击 超 链 接 对 象 时 的 样式 。 
:visited 伪 类 : 用 于 定义 超 链接 对 象 已 经 被 访问 过 后 的 样式 。 


:link 伪 类 用 于 设置 超 链接 对 象 在 没有 被 访问 时 的 样式 。 在 很 多 的 超 链接 应 用 中 ， 可 能 会 直接 定义 
<a> 标签 的 CSS 样式 ， 这 种 方法 与 定义 a:link 的 CSS 样式 有 什么 不 同 呢 ? 
HTML 代码 如 下 。 


<a> 超 链接 文字 样式 </a> 
<a href="#"> 超 链接 文字 样式 </a> 


CSS 样式 代码 如 下 。 


af 

color: black; 
} 

a:link{ 
color: red; 


} 
预览 效果 中 <a> 标签 的 样式 表 显示 为 黑色 ， 使 用 a:link 显示 为 红色 。 也 就 是 说 a:link 只 对 拥有 


href 属性 的 <a> 标签 产生 影响 ， 即 拥有 实际 链接 地 址 的 对 象 ， 而 对 直接 使 用 <a> 标签 谋 套 的 内 容 不 
会 发 生 实际 效果 ， 如 图 11-24 所 示 。 


超 链接 文字 样式 人 


图 11-24 


:hover 伪 类 用 来 设置 对 象 在 其 鼠标 悬 停 时 的 样式 表 属 性 。 该 状态 是 非常 实用 的 状态 之 一 ， 当 鼠 
标 移动 到 链接 对 象 上 时 ， 改 变 其 颜色 或 是 改变 下 划 线 状态 ， 这 些 都 可 以 通过 a:hover 状态 控制 实现 。 
对 于 无 href 属性 的 <a> 标签 ， 该 伪 类 不 发 生 作用 。 在 CSS 样式 中 该 伪 类 可 以 应 用 于 任何 对 象 。 
CSS 样式 代码 如 下 。 
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af 

Colors EEEEEES 
background-color: #CCCCCC; 
text-decoration: none; 
display: block; 
float:left; 

padding: 20px; 
margin-right: lpx; 

} 

a:hover { 
background-color: #FF9900 
} 


在 浏览 器 中 预览 ， 当 鼠标 没有 移 至 超 链接 对 象 上 时 ， 初 始 背景 为 灰色 ， 当 鼠标 经 过 链接 区 域 时 ， 
背景 色 由 灰色 变 成 楼 色 ， 效 果 如 图 11-25 所 示 。 








图 11-25 


:active 伪 类 用 于 设置 链接 对 象 在 被 用 户 激活 ( 在 被 点 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 。 在 实 
际 应 用 中 ， 本 状态 很 少 使 用 。 对 于 无 href 属性 的 <a> 标签 ， 该 伪 类 不 发 生 作 用 。 在 CSS 样式 中 该 
伪 类 可 以 应 用 于 任何 对 象 ， 并 且 :active 状态 可 以 和 :link 以 及 :visited 状态 同时 发 生 。 

CSS 样式 代码 如 下 。 


a:active{ 
background-color:#0099FF; 
} 


在 浏览 器 中 预览 ， 当 鼠标 没有 移 至 超 链 接 对 象 上 时 ， 初 始 背 景 为 灰色 ， 当 鼠标 点 击 链接 而 且 还 没 
有 释放 之 前 ， 链 接 块 呈现 出 a:active 中 定义 的 蓝 色 背景 ， 效 果 如 图 11-26 所 示 。 





图 11-26 
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:Visited 伪 类 用 于 设置 超 链接 对 象 在 其 链接 地 址 已 被 访问 过 后 的 样式 属性 。 页 面 中 每 一 个 链接 被 
访问 过 之 后 在 浏览 器 内 部 都 会 做 一 个 特定 的 标记 ， 这 个 标记 能 够 被 CSS 所 识别 ，a:visited 就 是 能 够 
针对 浏览 器 检测 已 经 被 访问 过 的 链接 进行 样式 设置 。 通 过 a:visited 的 样式 设置 ， 能 够 设置 访问 过 的 
链接 呈现 为 另外 一 种 颜色 ， 或 删除 线 的 效果 。 定 义 网 页 过 期 时 间或 用 户 清空 历史 记录 将 影响 该 伪 类 的 
作用 ， 对 于 无 href 属性 的 <a> 标签 ， 该 伪 类 不 发 生 作用 。 

CSS 样式 代码 如 下 。 


aslinkt 

Color: #FFFFFF; 
text-decoration: none; 
} 

a:visited{ 

color: #FF0000; 

} 


在 浏览 器 中 预览 ， 当 鼠标 没有 移 至 超 链接 对 象 上 时 ， 初 始 背 景 为 灰色 ， 当 单 击 设置 了 超 链 接 的 文 
本 并 释放 鼠标 左 键 后 ， 被 访问 过 后 的 链接 文本 会 由 白色 变 为 红色 ， 如 图 11-27 所 示 。 


超 链 接 文字 样式 


图 11-27 


设置 网 页 中 超 链接 文字 效果 
最 终 文件 光盘 \ 最 终 文件 \ 第 11 章 \11-3-4.html| 。 视频 : 光盘 \ 视 频 \ 第 11 章 \11-3-4.mp4 


I 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 11 章 \11-3-4.html”, 效果 如 图 11-28 所 示 。 
选中 页 面 中 的 新 闻 标题 文字 ， 分 别 为 各 新 闻 标 题 设置 空 链接 ， 效 果 如 图 11-29 所 示 。 





葬 思 转换 到 代码 视图 中 ， 可 以 看 到 所 设置 的 链接 代码 ， 如 图 11-30 所 示 。 保 存 页 面 ， 在 浏览 器 
中 预览 页 面 ， 可 以 看 到 默认 的 超 链接 文字 效果 ， 如 图 11-31 所 示 。 
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<div id="box"> 
<ul> 
<11><a_href="#"> 关 于 官方 网 站 系统 升级 优化 的 说 明 </a> 
2015.02.15<7T> 
<1i><a_href="#"> 智 能 宝贝 向 前 冲 海 选 赛 圆 满 结 束 ! </a> 
2815.01.3507T——™ pe 
<1i><a_href="#"> 网 络 晋级 赛 圆 满 结束 ， 总 决赛 晋级 名 单 出 炉 </a> 
! 2615.61.26</1> 
<1i><a_href="#"> 总 决赛 抽奖 ,以 及 淘宝 电子 券 发 放 说 明 ! </a> 
2615.61.16</Li> So 
</ul> 
</div> 














图 11-30 图 11-31 


[本 红 ”转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 .link1 的 类 CSS 样式 的 4 种 伪 
类 CSS 样式 如 图 11-32 所 示 。 返 回 设计 视图 中 ， 选 中 第 1 条 新 闻 标 题 ， 在 “类 ”下 拉 列 表 框 中 
选择 刚 定义 的 CSS 样式 link1 应 用 ， 如 图 11-33 所 示 。 


-Uinkl:link { 
color: #1C3800; 





text-decoration: none; 


} 

.Linkl:hover { 

color: #F30; 
text-decoration: underline; 


} 
.Linkl:active { 
color: #F90; 
text-decoration: underline; 
} 
.linkl:visited { 
color:; #999; 
text-decoration: line-through; 











b 








图 11-32 


区 在 页 面 中 可 以 看 到 应 用 超 链接 文本 的 效果 ， 如 图 11-34 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 
到 名 为 ink1 的 类 CSS 样式 是 直接 应 用 在 <a> 标签 中 的 ， 如 图 11-35 所 示 。 


<div id="box"> 
<ul> 
<1i><a href="#" class="Link1"> 关 于 官方 网 站 系统 升级 优 
化 的 说 明 </a> 2615.62-I5<7U ~ 
<1i><a href="#"> 智 能 宝贝 向 前 冲 海 选 赛 圆 满 结束 ! </a> 
2615.61.25</1Li> 
<1i><a href="#"> 网 络 晋级 赛 圆满 结束 ， 总 决赛 晋级 名 单 出 炉 ! 
</a> 2615.61.26</1i> 
<1i><a href="#"> 总 决赛 抽奖 ， 以 及 淘宝 电子 券 发 放 说 明 ! </a> 
2615.691.16</1Li> 
</ul> 
</div> 

















图 11-34 图 11-35 


国 罗 | 保存 页 面 , 并 保存 外 部 CSS 样式 表 文件 , 在 浏览 器 中 预览 页 面 , 将 鼠标 移 至 超 链接 文本 上 时 ， 
可 以 看 到 超 链接 文本 显示 为 蓝 色 有 下 划 线 的 效果 ， 如 图 11-36 所 示 。 当 鼠标 单 击 超 链接 文本 过 后 ， 
可 以 看 到 超 链接 文本 显示 为 灰色 的 效果 ， 如 图 11-37 所 示 。 
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图 11-36 


图 11-37 


[天 国 ”返回 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 .link2 的 类 CSS 样式 的 4 种 伪 类 CSS 样式 ， 如 














图 11-38 所 示 。 返 回 设计 视图 中 ， 选 中 第 2 条 新 闻 标 题 ， 在 “类 ”下 拉 列 表 中 选择 刚 定 义 的 CSS 


样式 link2 应 用 ， 采 用 相同 的 方法 ， 可 以 为 其 他 新 闻 标 题 应 用 超 链接 样式 ， 如 图 11-39 所 示 。 








国 


Linkasink T 


color: #1C3800; 


text-decoration: underline; 


,Uink2:hover { 


color: #03F; 
text-decoration: none; 
margin-top: 1px; 
margin-left: lpx; 


,Uink2:active { 


color: #333; 
text-decoration: none; 
margin-top: 1px; 
margin-left: lpx; 


日 
,Uink2:visited { 


color: #606; 
text-decoration: overline; 








图 11-38 





图 11-39 


OR 保存 页 面 ， 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 网 页 中 超 链接 文 
字 的 效果 ， 如 图 11-40 所 示 。 将 光标 移 至 某 个 超 链接 文本 上 ， 可 以 看 到 鼠标 经 过 状态 下 的 超 链 接 文 
字 效 果 ， 如 图 11-41 所 示 。 
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在 本 实例 中 ， 定 义 了 类 CSS 样式 的 4 种 伪 类 ， 再 将 该 类 CSS 样式 应 用 于 <a> 
标签 ， 同 样 可 以 实现 超 链接 文本 样式 的 设置 。 如 果 直 接 定义 <a> 标签 的 4 种 伪 类 ， 
则 对 页 面 中 的 所 有 <a> 标签 起 作用 ， 这 样 页 面 中 的 所 有 链接 文本 的 样式 效果 都 是 一 
样 的 。 通 过 定义 类 CSS 样式 的 4 种 伪 类 ， 就 可 以 在 页 面 中 实现 多 种 不 同 的 文本 超 链 
接 效果 。 





在 很 多 网 页 中 ， 超 链接 制作 成 各 种 按钮 的 效果 ， 这 些 效果 大 多 采用 图 像 的 方式 来 实现 。 通 过 
CSS 样式 的 设置 ， 同 样 可 以 制作 出 类 似 于 按钮 效果 的 导航 菜单 超 链接 。 


制作 网 站 导航 菜单 
最 终 文件 : 光盘 \ 最终 文件 \ 第 11 章 \11-3-5.html 。 视频 : 光盘 \ 视 频 \ 第 11 章 \11-3-5.mp4 


[GE 执行 “文件 > 打开 ”命令 ,打开 页 面 “ 光 盘 \ 源 文件 \ 第 11 章 \11-3-5.html”， 可 以 看 到 
页 面 效果 , 如 图 11-42 所 示 。 将 光标 移 至 名 为 menu 的 Div 中 , 将 多 余 文 字 删 除 , 输入 相应 的 段落 文本 ， 
并 将 段落 文本 创建 为 项 目 列表 ， 如 图 11-43 所 示 。 


(IT 本 mm MrHFustza 及 











图 11-42 图 11-43 


节 3 弄 | 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 文件 中 ,创建 名 为 #menu1li 的 CSS 样式 , 如 图 11-44 
所 示 。 返 回 网 页 设计 视图 中 ， 可 以 看 到 页 面 的 效果 ， 如 图 11-45 所 示 。 





#menu li { 
list-style-type: none; 
float: left; 














图 11-44 图 11-45 


249 回 


[一 分 别 为 各 导航 菜单 项 设置 空 链接 ， 可 以 看 到 超 链接 文字 效果 ， 如 图 11-46 所 示 。 转 换 到 代 
码 视图 中 ， 可 以 看 到 该 部 分 页 面 代码 ， 如 图 11-47 所 示 。 





<body> 
<div id="menu"> 
<ul> 
<1i><a href="#"> 网 站 首页 </a></1i> 
<1i><a href="#"> 关 于 我 们 </a></1i> 
<1i><a href="#"> 新 闻 活 动 </a></1i> 




















<1i><a href="#"> 作 品 赏析 </a></1i> 
<1i><a href="#"> 服 务 介绍 </a></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 
</ul> 
</div> 
</body> 
图 11-46 图 11-47 


OW 转换 到 外 部 CSS 样式 文件 中 ， 定 义 名 称 为 #menu li a 的 CSS 样式 ， 如 图 11-48 所 示 。 
返回 设计 视图 中 ， 可 以 看 到 所 设置 的 超 链接 文字 效果 ， 如 图 11-49 所 示 。 


#menu li af 

width: 136px; 
height: 25px; 
line-height: 25px; 
font-weight: bold; 
color: #FFF; 
text-align: center; 
margin-left: 4px; 
margin-right: 4px; 
float: left; 

















图 11-48 图 11-49 


辐 。 转换 到 外 部 CSS 样式 表 文件 中 ， 定 义 名 称 为 #menu li a:link,#menu lia:visited 的 CSS 样 
式 ， 如 图 11-50 所 示 。 返 回 设计 视图 中 ， 可 以 看 到 所 设置 的 超 链接 文字 效果 ， 如 图 11-51 所 示 。 





#menu li a:link,#menu li a:visited { 
border: solid 2px #FFF; 
background-color: rgba(90,153,204,0.6); 
text-decoration: none; 











} 





图 11-50 图 11-51 


[和 国 转换 到 外 部 CSS 样式 表 文件 中 ， 定 义 名 称 为 #menu li a:hover 的 CSS 样式 ， 如 图 11-52 
所 示 。 返 回 设计 视图 中 ， 可 以 看 到 所 设置 的 超 链接 文字 效果 ， 如 图 11-53 所 示 。 
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#menu Li a:hover { 
border: solid 2px #666699; 
background-color: rgba(255,102,0,0.5); 
color: #333; 
text-decoration: none; 











图 11-52 图 11-53 


Oj 完成 导航 菜单 的 制作 ， 保 存 页 面 ， 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 如 
11-54 所 示 。 将 光标 移 至 导航 菜单 项 上 ， 可 以 看 到 使 用 CSS 样式 实现 的 按钮 式 导航 菜单 效果 ， 
如 图 11-55 所 示 。 





图 11-54 图 11-55 





在 浏览 网 页 时 ， 通 常 看 到 的 鼠标 指针 形状 有 箭头 、 手 形 和 | 字形 ， 而 在 Windows 环境 下 实际 看 
到 的 鼠标 指针 种 类 要 比 这 个 多 得 多 。CSS 弥补 了 HTML 语言 在 这 方面 的 不 足 ， 通 过 cursor 属性 可 
以 设置 各 种 鼠标 指针 样式 。 


通过 在 CSS 样式 中 设置 cursor 属性 ， 可 以 在 网 页 中 实现 各 种 不 同 的 光标 指针 效果 ， 有 效 地 丰 
富 网 页 表现 效果 ， 使 网 页 更 加 个 性 化 。 

cursor 属性 包含 17 个 属性 值 ， 对 应 光标 的 17 种 样式 ， 而 且 还 可 以 通过 url 链接 地 址 自 定义 光 
标 指 针 ，cursor 属性 的 相关 属性 值 如 表 11-12 所 示 。 
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表 11-12 cursor 属性 值 说 明 





tiolmy er 





在 CSS 样式 中 可 以 通过 cursor 属性 设置 光标 指针 效果 ， 该 属性 可 以 在 网 页 的 任何 标签 中 使 用 ， 
从 而 可 以 改变 各 种 页 面 元 素 的 光标 效果 。 在 网 页 中 将 光标 移 至 某 个 超 链接 对 象 上 时 ， 可 以 实现 超 链接 
颜色 变化 和 背景 图 像 变化 ， 并 且 光 标 指针 也 可 以 发 生变 化 。 


在 网 页 中 实现 多 种 光标 指针 效果 
最 终 文 件 : 光盘 \ 最 终 文件 \ 第 11 章 \11-4-2.html 。 视频 : 光盘 \ 视 频 \ 第 11 章 \11-4-2.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 11 章 \11-4-2.html”， 效 果 如 
11-56 所 示 。 转 换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 body 的 标签 CSS 样式 
设置 代码 ， 如 图 11-57 所 示 。 


jls EN rr 





[body < 

font-size: 12px; 

color: #525647; 

background-color: #EQDDCE; 
background-image: url(../images/111301.jpg); 
background-repeat: repeat-x; 




















图 11-56 图 11-57 


E 到 在 名 为 body 的 标签 CSS 样式 设置 代码 中 添加 cursor 属 性 设置 ,如 图 11-58 所 示 。 保 存 页 面 ， 
并 保存 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 网 页 中 的 光标 指针 效果 ， 如 图 11-59 所 示 。 
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body { 
font-size: 12px; 
color: #525047; 
background-color: #EQDDCE; 
background-image: url(../images/111301.jpg); 
background-repeat: repeat-x; 


cursor: move; 











} 





图 11-58 图 11-59 


国 3 蜀 ”返回 外 部 CSS 样式 表 文件 中 , 在 名 为 #menu img 的 CSS 样式 代码 中 添加 cursor 属性 设置 ， 
如 图 11-60 所 示 。 保 存 页 面 ， 并 保存 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 当 光标 移 至 
页 面 左 侧 相应 的 图 像 按钮 上 方 时 ， 光 标 指针 会 发 生变 化 ， 如 图 11-61 所 示 。 





#menu img { 
margin-top: Spx; 
margin-bottom: Spx; 


cursor: help; 











} 





图 11-60 图 11-61 


CSS 样式 不 仅 能 够 准确 地 控制 及 美化 页 面 ， 而 且 还 能 定义 鼠标 指针 的 样式 。 当 
鼠标 移 至 不 同 的 HTML 元 素 对 象 上 时 ， 鼠 标 会 以 不 同形 状 显 示 。 很 多 时 候 ， 浏 览 器 
调用 的 鼠标 是 操作 系统 的 鼠标 效果 ， 因 此 同一 浏览 器 之 间 的 差别 很 小 ， 但 不 同 操作 
系统 的 用 户 之 间 还 是 存在 差异 的 。 


超 链 接 是 网 页 中 非常 重要 的 功能 ， 通 过 CSS 样式 不 但 可 以 设置 超 链接 标签 <a> 的 样式 ， 还 可 
以 对 超 链 接 4 种 伪 类 的 样式 分 别 进行 设置 ， 从 而 实现 更 加 美观 的 网 页 超 链 接 效 果 ， 本 章 主要 介绍 使 用 
CSS 设置 边框 和 超 链接 ， 以 及 新 增 的 CSS 3 属性 ， 并 通过 实战 练习 的 方式 介绍 了 各 种 CSS 样式 属 
性 的 使 用 方法 和 技巧 ， 读 者 需要 掌握 CSS 样式 属性 的 设置 方法 ， 并 能 够 将 其 应 用 到 实际 的 工作 中 。 
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re MA 
= 合 本 章 知识 点 
第 12 章 CSS 3 使 模型 和 四 
界面 设计 认识 CSS 3 弹性 和 增强 的 


盒 模型 

在 设计 和 制作 网 站 页 面 时 ， 能 否 控制 好 各 个 元 素 在 页 面 中 掌握 定位 网 页 元 素 的 相关 知 
的 位 置 是 非常 关键 的 。 在 前 面 的 章节 中 ， 已 经 对 CSS 样式 控 识 和 语法 
制 网 页 中 各 种 元 素 的 方法 和 技巧 进行 了 详细 的 讲解 ， 本 章 将 在 ww 认识 并 掌握 CSS 3 新 增 用 
此 基础 上 对 CSS 定位 和 界面 设计 进行 详细 介绍 ， 不 但 如 此 ， 户 界面 设计 属性 
CSS 样式 在 原 有 的 基础 上 还 在 不 断 完善 ，CSS 3 有 很 多 新 增 De 
属性 ， 实 现 了 以 前 无 法 实现 或 难以 实现 的 功能 。 

属性 相关 知识 和 语法 

















盒 模型 是 使 用 Div+CSS 对 网 页 元 素 进行 控制 时 一 个 非常 重要 的 概念 ， 只 有 很 好 地 理解 和 掌握 盒 
模型 以 及 其 中 每 个 元 素 的 用 法 ， 才 能 真正 地 控制 页 面 中 各 元 素 的 位 置 。 


在 CSS 中 ， 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 这 个 和 矩形 框 就 称 为 盒 模型 。 盒 模型 描述 了 元 
素 及 其 属性 在 页 面 布 局 中 所 占 的 空间 大 小 ， 因 此 盒 模型 可 以 影响 其 他 元 素 的 位 置 及 大 小 。 一 般 来 说 这 些 
被 占据 的 空间 往往 都 比 单纯 的 内 容 要 大 。 换 句 话说 ， 可 以 通过 整个 盒子 的 边框 和 距离 等 参数 ， 来 调节 盒 
子 的 位 置 。 
盒 模型 是 由 margin( 边界 )、border( 边框 )、padding( 填充 ) 和 content( 内 容 ) 几 个 部 分 组 成 的 。 
此 外 ， 在 盒 模型 中 ， 还 具备 高 度 和 宽度 两 个 辅助 属性 ， 如 图 12-1 所 示 。 

从 图 中 可 以 看 出 ， 盒 模型 包含 4 个 部 分 的 内 容 。 

e margin 属性 

margin 属性 称 为 边界 或 外 边 距 ， 用 来 设置 内 容 与 内 容 之 间 的 距离 。 

e border 属性 

border 属性 称 为 边框 或 内 容 边框 线 ， 可 以 设置 边框 的 粗细 、 颜 色 和 样式 等 。 

e padding 属性 

padding 属性 称 为 填充 或 内 边 距 ， 用 来 设置 内 容 与 边框 之 间 的 距离 。 
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图 12-1 


® content 
称 为 内 容 ， 是 盒 模 型 中 必需 的 一 部 分 ， 可 以 放置 文字 、 图 像 等 内 容 。 





一 个 盒子 的 实际 高 度 或 宽度 是 由 content+padding+border+margin 组 成 的 。 
在 CSS 中 ， 可 以 通过 设置 width 或 height 属性 来 控制 content 部 分 的 大 小 ， 并 且 
对 于 任何 一 个 盒子 ， 可 以 分 别 设置 四 边 的 border、margin 和 padding。 


关于 CSS 盒 模型 ， 有 以 下 几 个 要 点 是 在 使 用 过 程 中 需要 注意 的 。 
边框 默认 的 样式 (border-style) 可 设置 为 不 显示 (none)。 
填充 值 (padding) 不 可 为 负 。 
边界 值 (margin) 可 以 为 负 ， 其 显示 效果 在 各 浏览 器 中 可 能 不 同 。 
内 联 元 素 ， 例 如 <a>， 定 义 上 下 边界 不 会 影响 到 行 高 。 
对 于 块 级 元 素 ， 未 浮动 的 垂直 相 邻 元 素 的 上 边界 和 下 边界 会 被 压缩 。 例 如 有 上 下 两 个 元 素 ， 
上 面 元 素 的 下 边界 为 10px， 下 面 元 素 的 上 边界 为 5px， 则 实际 两 个 元 素 的 间距 为 10px( 两 
个 边界 值 中 较 大 的 值 )， 这 就 是 盒 模 型 的 垂直 空白 边 芭 加 的 问题 。 

e 浮动 元 素 ( 无 论 是 左 还 是 右 浮动 ) 边界 不 压缩 ， 并 且 如 果 浮 动 元 素 不 声明 宽度 ， 则 其 宽度 趋 

向 于 0， 即 压缩 到 其 内 容 能 承受 的 最 小 宽度 。 

e ”如果 盒 中 没有 内 容 , 则 即使 定义 了 宽度 和 高 度 都 为 100%, 实际 上 只 占 0%, 因此 不 会 被 显示 ， 

此 处 在 使 用 Div+CSS 布局 的 时 候 需要 特别 注意 。 


margin 属性 用 于 设置 页 面 中 元 素 和 元 素 之 间 的 距离 ， 即 定义 元 素 周围 的 空间 范围 ， 是 页 面 排版 
中 一 个 比较 重要 的 概念 。 
margin 属性 的 语法 格式 如 下 。 

















margin: auto | length; 
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其 中 , auto 表示 根据 内 容 自 动 调整 , length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 百分数 ， 
百分数 是 基于 父 对 象 的 高 度 。 对 于 内 联 元 素来 说 ， 左 右 外 延边 距 可 以 是 负数 值 。 
margin 属性 包含 4 个 子 属性 ， 分 别 用 于 控制 元 素 四 周 的 边 距 ， 如 表 12-1 所 示 。 


表 12-1 margin 属性 的 子 属性 
说 明 





在 给 margin 设置 值 时 ， 如 果 提 供 4 个 参数 值 ， 将 按 顺 时 针 的 顺序 作用 于 上 、 右 、 下 、 左 四 边 ; 
如 果 只 提供 1 个 参数 值 ， 则 将 作用 于 四 边 ; 如 果 提 供 2 个 参数 值 ， 则 第 1 个 参数 值 作用 于 上 、 下 两 边 ， 
第 2 个 参数 值 作用 于 左 、 右 两 边 ; 如 果 提 供 3 个 参数 值 ， 第 1 个 参数 值 作用 于 上 边 ， 第 2 个 参数 值 
作用 于 左 、 右 两 边 ， 第 3 个 参数 值 作用 于 下 边 。 


border 属性 是 内 边 距 和 外边 距 的 分 界线 ， 可 以 分 离 不 同 的 HTML 元 素 ，border 的 外 边 是 元 素 
的 最 外 围 。 在 网 页 设计 中 ， 如 果 计 算 元 素 的 宽 和 高 ， 则 需要 把 border 属性 值 计算 在 内 。 
border 属性 的 语法 格式 如 下 。 





border : border-style | border-color | border-width; 


border 属性 有 3 个 子 属 性 ， 分 别 是 border-style( 边框 样式 )、border-width( 边框 宽度 ) 和 
border-color( 边框 颜色 ) 。 


在 CSS 中 ， 可 以 通过 设置 padding 属性 定义 内 容 与 边框 之 间 的 距离 ， 即 内 边 距 。 
padding 属性 的 语法 格式 如 下 。 


padding: length; 


padding 属性 值 可 以 是 一 个 具体 的 长 度 ， 也 可 以 是 一 个 相对 于 上 级 元 素 的 百分比 ， 但 不 可 以 使 用 
负 值 。 
padding 属性 包括 4 个 子 属性 ， 如 表 12-2 所 示 。 


表 12-2 padding 属性 的 子 属性 
属性 | 说 明 
[Eddingstop 设置 元 素 上 填充 
padding~right 设置 元 素 右 填充 
padding~bottom | 设置 元 素 下 填充 
Padading<ie 设置 元 素 左 填充 
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在 为 padding 设置 值 时 ， 如 果 提 供 4 个 参数 值 ， 将 按 顺 时 针 的 顺序 作用 于 上 、 右 、 下 、 左 四 边 ; 
如 果 只 提供 1 个 参数 值 ， 则 将 作用 于 四 边 ; 如 果 提供 2 个 参数 值 ， 则 第 1 个 参数 值 作用 于 上 、 下 两 边 ， 
第 2 个 参数 值 作 用 于 左 、 右 两 边 ; 如 果 提供 3 个 参数 值 ， 第 1 个 参数 值 作用 于 上 边 ， 第 2 个 参数 值 
作用 于 左 、 右 两 边 ， 第 3 个 参数 值 作用 于 下 边 。 


设置 网 页 元 素 盒 模型 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 12 章 \12-1-5.html 。 视频 : 光盘 \ 视 频 \ 第 12 章 \12-1-5.mp4 


UI 执行 “文件 > 打开 "命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 12 章 \12-1-5.html”, 效果 如 图 12-2 所 示 。 
将 光标 移 至 名 为 pic 的 Div 中 , 将 多 余 的 文字 删除 , 插入 图 像 “光盘 \ 源 文件 \ 第 12 章 \images\121503. 
jpg”， 效 果 如 图 12-3 所 示 。 


in am er 












图 12-2 图 12-3 


[IgE 王 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 称 为 #pic 的 CSS 样式 ， 在 该 CSS 
样式 中 添加 margin 外 边 距 属性 设置 ， 如 图 12-4 所 示 。 返 回 网 页 设计 视图 中 ， 选 中 页 面 中 id 名 称 为 
pic 的 Div， 可 以 看 到 设置 的 外 边 距 的 效果 ， 如 图 12-5 所 示 。 


CI 








#pic { 
width: 851px; 
height: 342px; 
background-color: rgba(0,0,0,0.5); 
margin: 60px auto Opx auto; 


} 
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图 12-4 图 12-5 


在 网 页 中 如 果 希 望 元 素 水 平 居 中 显示 ， 可 以 通过 margin 属性 设置 左边 距 和 右边 
距 均 为 auto， 则 该 元 素 在 网 页 中 会 自动 水 平 居中 显示 。 





葬 ”返回 到 外 部 CSS 样式 表 文 件 中 ， 在 名 为 #pic 的 CSS 样式 中 添加 border 属性 设置 ， 如 
12-6 所 示 。 返 回 网 页 设计 视图 中 ， 可 以 看 到 为 页 面 中 id 名 称 为 pic 的 Div 设置 边框 的 效果 ， 如 
12-7 所 示 。 
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为 梦想 得 
es [又 
#pic { 
width: 851px; 
height: 342px; 
background-color: rgba(0,0,0,0.5); 
margin: 60px auto 9px auto; 
border: solid 12px #FFF; 














} 
图 12-6 图 12-7 
border 属性 不 仅 可 以 设置 图 像 的 边框 ， 还 可 以 为 其 他 元 素 设置 边框 ， 如 文字 、 
Div 等 。 在 本 实例 中 ， 主 要 讲解 的 是 使 用 border 属性 为 Div 元 素 添加 边框 。 


[ER 返回 到 外 部 CSS 样式 表 文件 中 ， 在 名 为 #pic 的 CSS 样式 中 添加 padding 属性 设置 ， 如 
12-8 所 示 。 返 回 网 页 设计 视图 中 ， 选 中 页 面 中 id 名 称 为 pic 的 Div， 可 以 看 到 设置 的 填充 效果 ， 
如 图 12-9 所 示 。 





#pic { 
width: 811px; 
height: 302px; 
background-color: rgba(0,0,0,0.5); 
margin: 60px auto Opx auto; 
border: solid 12px #FFF; 
padding: 20px; 

















图 12-8 图 12-9 


在 CSS 样式 代码 中 ，width 和 height 属性 分 别 定义 的 是 Div 的 内 容 区 域 的 

宽度 和 高 度 ， 并 不 包括 margin、border 和 padding， 此 处 在 CSS 样式 中 添加 了 
padding 属性 ， 设 置 四 边 的 填充 均 为 20 像素 ， 则 需要 在 高 度 值 上 减 去 40 像素 ， 在 
宽度 值 上 同样 减 去 40 像素 ， 这 样 才能 够 保证 Div 的 整体 宽度 和 高 度 不 变 。 


EE 国 ”保存 页 面 ， 并 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 12-10 所 示 。 
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图 12-10 





从 盒 模型 中 可 以 看 出 中 间 部 分 就 是 content( 内 容 )， 它 主要 用 来 显示 内 容 ， 这 
也 是 整个 盒 模型 的 主要 部 分 ， 其 他 的 如 margin、border、padding 所 做 的 操作 都 是 
对 content 部 分 所 做 的 修饰 。 对 于 内 容 部 分 的 操作 ， 也 就 是 对 文字 、 图 像 等 页 面 元 


素 的 操作 。 


弹性 盒 模型 是 CSS 3 最 新 引进 的 盒 模型 处 理 机 制 ， 使 用 弹性 盒 模型 ， 可 以 实现 盒 元 素 内 部 的 多 
种 布局 ， 包 括 排列 方向 、 排 列 顺序 、 空 间 分 配 和 对 齐 方式 等 ， 大 大 增强 了 布局 的 灵活 性 ， 可 以 轻松 地 
设计 出 自 适 应 浏览 器 窗口 的 流动 布局 或 者 自 适 应 大 小 的 弹性 布局 。 

CSS 3 为 弹性 盒 模型 新 增 了 8 个 属性 ， 分 别 介绍 如 表 12-3 所 示 。 


表 12-3， 新 增 的 盒子 模型 的 相关 属性 


| 说 明 
[EXEOrient 用 于 定义 盒子 分 布 的 坐标 轴 

[ES 用 于 定义 子 元 素 在 盒子 内 垂直 方向 上 的 空间 分 配方 式 
[EXEOTECHOn 用 于 定义 盒子 的 显示 顺序 

[EGG 用 于 定义 子 元 素 在 盒子 内 的 自 适 应 尺 二 
[EGGXEOTOUD LU 用 于 定义 自 适 应 子 元 素 群 组 

B56 用 于 定义 子 元 素 分 布 显示 

于 0rdna=g760 有 | 用 于 定义 子 元 素 在 盒子 内 的 显示 位 置 

到 二 到 用 于 定义 子 元 素 在 盒子 内 水 平方 向 上 的 空间 分 配方 式 


弹性 盒 模型 是 CSS 3 新 增 的 一 种 布局 方式 ， 它 比 传统 的 浮动 布局 方式 更 加 完善 、 更 加 灵活 ， 而 
使 用 方法 却 非常 简单 。 

开启 弹性 盒 模型 的 方法 ， 就 是 把 display 属性 值 设置 为 box 或 inline-box。 目 前 还 没有 浏览 器 
支持 box 属性 值 ， 为 了 能 兼容 webkit 内 核 和 gecko 内 核 的 浏览 器 ， 可 以 分 别 使 用 -webkit-box 
和 -moz-box 属性 。 开 启 弹 性 盒 模型 后 ， 文 档 就 会 按照 弹性 盒 模型 默认 的 方式 来 布局 子 元 素 。 
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例如 下 面 的 页 面 代码 。 





在 以 上 的 代码 中 ， 在 body 标签 的 CSS 样式 中 设置 了 display 属性 为 box， 并 针对 webkit 内 核 
和 gecko 内 核 设 置 了 各 自 的 私有 属性 值 ， 则 body 标签 中 的 内 部 元 素 将 改变 原 有 的 文档 流动 方式 ， 
使 用 弹性 盒 模型 默认 的 文档 流动 方式 布局 。 

在 Chrome 浏览 器 中 预览 该 页 面 ， 可 以 看 到 在 页 面 中 显示 了 3 个 盒子 ， 并 且 这 3 个 盒子 是 并 列 
在 一 行 中 显示 的 ， 而 在 CSS 样式 代码 中 并 没有 设置 任何 的 定位 属性 。 效 果 如 图 12-11 所 示 。 
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图 12-11 


元 素 布局 方向 是 指 弹性 盒 模型 内 部 的 元 素 流动 布局 方向 ， 包 括 横 排 和 竖 排 两 种 。 在 CSS 中 , 元 
素 布 局 方向 可 以 通过 CSS 3 新 增 的 box-orient 属性 进行 控制 。 基 于 webkit 内 核 的 替代 私有 属性 
是 -webkit-box-orient， 基 于 gecko 内 核 的 替代 私有 属性 是 -moz-box-orient。 

box-orient 属性 的 语法 格式 如 下 。 


box-orient: horizontal | vertical | inline-axis | block-axis | inherit; 


box-orient 的 相关 属性 值 说 明 如 表 12-4 所 示 。 
表 12-4 box-orient 属性 值 说 明 


| 两性 什 | 说 明 

区 下 设置 box-orient 属性 为 horizontal， 可 以 将 盒子 元 素 从 左 到 右 在 一 条 水 平 线 上 显示 它 
的 子 元 素 

| 设置 box-orient 属性 为 vertical， 可 以 将 盒子 元 素 从 上 到 下 在 一 条 垂直 线 上 显示 它 的 子 
元 素 

iime=axs 下 | 设置 box-orient 属性 为 iniine-axis， 可 以 将 盒子 元 素 沿 着 内 联 轴 显 示 它 的 子 元 素 


i566 设置 box-orient 属性 为 block-axis， 可 以 将 盒子 元 素 沿 着 块 轴 显 示 它 的 子 元 素 
[ren 设置 box-orient 属 性 为 inherit， 表 示 盒子 继承 父 元 素 的 相关 属性 


例如 ， 修 改 CSS 样式 代码 如 下 。 在 开启 弹性 盒 模型 布局 的 基础 上 ， 改 变 3 个 Div 的 布局 方向 为 
坚 向 显示 。 
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<style type="text/css"> 


body { 
display: box; /* 标准 声明 显示 盒子 */ 
display: -moz-box; /* 兼容 gecko 核心 浏览 器 */ 
display: -webkit-box; /* 兼容 webkit 核心 浏览 器 */ 
box-orient: vertical; /* 设置 为 竖 向 布局 方式 */ 
-webkit-box-orient: vertical; /* 兼容 webkit 核心 浏览 器 */ 
-moz-box-orient: Vertical7 /* 兼容 gecko 核心 浏览 器 */ 

} 

#1left { 


width: 960px; 
height: 200px; 
background-color: #09F; 
text-align: center; 
padding: 20px; 

#main { 
width: 960px; 
height: 200px; 
background-color: #F90; 
text-align: center; 
padding: 20px; 

} 

#right { 
width: 960px; 
height: 200px; 
background-color: #9C0; 
text-align: center; 
padding: 20px; 

} 

</style> 





添加 box-orient 属性 ， 将 该 属性 设置 为 vertical， 表 示 弹 性 盒 模型 内 部 按 垂 直方 向 布局 ， 并 设 
置 了 兼容 样式 。 为 了 显示 整齐 , 同时 也 修改 了 3 个 div 的 宽度 和 高 度 。 在 Chrome 浏览 器 中 预览 页 面 ， 
可 以 看 到 3 个 盒子 垂直 布局 的 效果 ， 如 图 12-12 所 示 。 




















图 12-12 
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元 素 布局 顺序 是 用 来 控制 弹性 盒 模型 中 子 元 素 的 排列 顺序 ， 也 可 以 说 是 控制 弹性 盒 模型 内 部 元 
素 的 流动 顺序 。 在 CSS 样式 中 ， 元 素 布局 顺序 可 以 通过 CSS 3 新 增 的 box-direction 属性 进行 设 
置 。 基 于 webkit 内 核 的 替代 私有 属性 是 -webkit-box-direction， 基 于 gecko 内 核 的 蔡 代 私有 属性 
是 -moz-box-direction。 

box-direction 属性 的 语法 格式 如 下 。 


box-direction: normal | reverse | inherit; 


box-direction 的 相关 属性 值 说 明 如 表 12-5 所 示 。 
表 12-5 box-direction 属性 值 说 明 











”局 性 信 | 说 ”了 明 
设置 box-direction 属性 为 normal， 表 示 盒 子 顺序 为 正常 显示 顺序 ， 即 当 盒子 元 素 的 
box-orient 属性 值 为 horizontal 时 ， 其 包含 的 子 元 素 按照 从 左 到 右 的 顺序 进行 显示 ， 
也 就 是 说 每 个 子 元 素 的 左边 总 是 靠 着 前 一 个 子 元 素 的 右边 ; 当 盒 子 元 素 的 box-orient 
属性 值 为 vertical 时 ， 则 其 包含 的 子 元 素 按照 从 上 到 下 的 顺序 进行 显示 

| ”名 设置 box-direction 属性 为 reverse， 表 示 盒 子 所 包含 的 子 元 素 的 显示 顺序 将 与 normal 

[er 设置 box-direction 属性 为 nherit， 表 示 继 承 上 级 元 素 的 显示 顺序 


例如 ， 修 改 CSS 样式 代码 如 下 。 在 开启 弹性 盒 模型 布局 的 基础 上 ， 改 变 3 个 Div 的 布局 方向 为 
反 向 显示 。 


<style type="text/css"> 


body { 
display: box; /* 标准 声明 显示 盒子 */ 
display: -moz-box; /* 兼容 gecko 核心 浏览 器 */ 
display: -webkit-box; /* 兼容 webkit 核心 浏览 器 */ 
box-direction: reverse; /* 设置 为 反 向 布局 顺序 */ 
-webkit-box-direction: reverse;  /* 兼 容 webkit 核心 浏览 器 */ 
-moz-box-direction: reverse; /* 兼容 gecko 核心 浏览 器 */ 

} 

#1left { 


width: 160px; 
height: 500px; 
background-color: #09F; 
text-align: center; 
padding: 20px; 

} 

#main f{ 
width: 560px; 
height: 500px; 
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background-color: #F90; 
text-align: center; 
padding: 20px; 

#right { 
width: 160px; 
height: 500px; 
background-color: #9C0; 
text-align: center; 
padding: 20px; 

由 

</style> 


添加 box-direction 属性 ， 将 该 属性 值 设 置 为 reverse， 表 示 弹 性 盒 模型 内 部 的 子 元 素 按 反 向 顺 
序 布局 ， 并 设置 了 兼容 样式 。 弹 性 盒 模型 内 默认 的 布局 方式 为 水 平方 向 布局 ， 在 Chrome 浏览 器 中 
预览 页 面 ， 可 以 看 到 3 个 盒子 在 水 平方 向 上 反 向 显示 的 效果 ， 如 图 12-13 所 示 。 





图 12-13 


元 素 位 置 指 的 是 元 素 在 弹性 盒 模型 中 的 具体 位 置 。 在 CSS 样式 中 ， 元 素 位 置 可 以 通过 CSS 
3 新 增 的 box-ordinal-group 属性 进行 设置 。 基 于 webkit 内 核 的 蔡 代 私有 属性 是 -webkit-box- 
ordinal-group， 基 于 gecko 内 核 的 蔡 代 私 有 属性 是 -moz-box-ordinal-group。 
box-ordinal-group 属性 的 语法 格式 如 下 。 





box-ordinal-group: <integer>; 


参数 值 <integer> 代表 的 是 一 个 自然 数 ， 从 1 开始 ， 用 来 设置 子 元 素 的 位 置 序 号 ， 子 元 素 会 根 
据 该 属性 的 参数 值 从 小 到 大 进行 排列 。 当 不 确定 子 元 素 的 box-ordinal-group 属性 值 时 ， 其 序号 全 
部 默认 为 1， 并 且 相 同 序号 的 元 素 会 按照 其 在 文档 中 加 载 的 顺序 进行 排列 。 

例如 ， 修 改 CSS 样式 代码 如 下 。 在 开启 弹性 盒 模型 布局 的 基础 上 ， 修 改 左 侧 Div 和 中 间 Div 的 
显示 位 置 。 
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在 名 为 #left 的 CSS 样式 设置 中 添加 box-ordinal-group 属性 设置 ， 设 置 值 为 2， 在 名 为 
#right 的 CSS 样式 设置 中 添加 box-ordinal-group 属性 设置 ， 设 置 值 为 3， 从 而 改变 3 个 Div 的 
显示 顺序 。 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 3 个 盒子 在 水 平方 向 上 改变 显示 顺序 的 效果 ， 
如 图 12-14 所 示 。 











图 12-14 





CSS 3 中 新 增 的 box-flex 属性 ， 用 于 定义 弹性 盒 模 型 内 部 子 元 素 是 否 具有 空间 弹性 。 当 盒 元 素 
的 尺寸 缩小 ( 或 扩大 ) 时 ， 被 定义 为 有 空间 弹性 的 子 元 素 的 尺寸 也 会 缩小 ( 或 扩大 )。 每 当 盒 元 素 有 额 
外 的 空间 时 ， 具 有 空间 弹性 的 子 元 素 会 扩大 自身 大 小 来 填补 这 一 空间 。 基 于 webkit 内 核 的 蔡 代 私有 
属性 是 -webkit-box-flex， 基 于 gecko 内 核 的 蔡 代 私有 属性 是 -moz-box-flex。 

box-flex 属性 的 语法 格式 如 下 。 


box-flex: <value>; 


参数 值 <value> 代表 的 是 一 个 整数 或 者 小 数 ， 不 可 以 为 负 值 ， 默 认 值 为 0.0。 使 用 空间 弹性 属性 
设置 ， 使 得 盒 元 素 的 内 部 元 素 的 总 宽度 和 总 高 度 始终 等 于 盒 元 素 的 宽度 与 高 度 。 不 过 只 有 当 盒 元 素 具 
有 确定 的 宽度 或 高 度 时 ， 才 能 表现 出 子 元 素 的 空间 弹性 。 

例如 ， 修 改 CSS 样式 代码 如 下 。 在 开启 弹性 盒 模型 布局 的 基础 上 ， 设 置 3 个 Div 的 宽度 相同 ， 
并 在 左 侧 的 Div 中 添加 box-flex 属性 ， 使 其 具有 空间 弹性 。 


<style type="text/css"> 


body{ 
display: box; /* 标准 声明 显示 盒子 */ 
display: -moz-box; /* 兼容 gecko 核心 浏览 器 */ 
display: -webkit-box; /* 兼容 webkit 核心 浏览 器 */ 
} 
div { 
width: 160px; /* 设置 3 个 div 的 固定 宽度 为 160px*/ 


height: 500px; 
padding: 20px; 

} 

#left { 
background-color: #09F; 
text-align: center; 


box-flex: 1; /* 标准 用 法 */ 


266 


-webkit-box-flex: 1; /* 兼容 webkit 核心 浏览 器 */ 
-moz-box-flex: 17 /* 兼容 gecko 核心 浏览 器 */ 

} 

#main { 


background-color: #F90; 
text-align: center; 

} 

#right { 
background-color: #9C0; 
text-align: center; 

} 

</style> 


在 弹性 盒 模 型 中 左 侧 的 Div 的 CSS 样式 设置 中 添加 box-flex 属性 设置 ， 设 置 其 属性 值 为 1， 
使 其 具有 空间 弹性 以 分 配 弹性 盒 模型 中 的 剩余 空间 。 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 3 个 
盒子 中 左 侧 盒 子 的 弹性 空间 效果 ， 如 图 12-15 所 示 。 在 本 实例 中 ， 当 浏览 器 窗口 的 宽度 改变 时 ， 左 
侧 Div 的 宽度 也 会 跟着 变化 。 








图 12-15 





CSS 3 中 新 增 的 box-pack 和 box-align 属性 ， 分 别 用 于 设置 弹性 盒 模型 内 部 元 素 的 水 平 对 齐 
方式 和 垂直 对 齐 方式 。 这 种 对 齐 方式 对 盒 元 素 内 部 的 文字 、 图 像 及 子 元 素 都 是 有 效 的 。 基 于 webkit 
内 核 的 替代 私有 属性 是 -webkit-box-pack 和 -webkit-box-align， 基 于 gecko 内 核 的 替代 私有 
属性 是 -moz-box-pack 和 -moz-box-align。 

box-pack 属性 可 能 设置 子 元 素 在 水 平方 向 上 的 对 齐 方式 ，box-pack 属性 的 语法 格式 如 下 。 


box-pack:startlendlcenter1]justify7 


box-pack 的 相关 属性 值 说 明 如 表 12-6 所 示 。 
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表 12-6 box-pack 属性 值 说 明 
融和 性 值 | 说 。 明 
SELL 设置 box-pack 属 性 为 start， 表 示 所 有 子 容器 都 分 布 在 父 容器 的 左 侧 ， 右 侧 留 空 
ISO 设置 box-pack 属 性 为 end， 表 示 所 有 子 容器 都 分 布 在 父 容器 的 右 侧 ， 左 侧 留 空 
5 设置 box-pack 属性 为 center， 表 示 所 有 子 容器 平均 分 布 ( 默认 值 ) 


设置 box-pack 属性 为 justify， 表 示 平 均 分 配 父 容器 中 的 剩余 空间 ( 能 压缩 子 容器 
的 大 小 ， 并 且 具 有 全 局 居中 的 效果 ) 







box-align 属性 可 以 设置 子 元 素 在 垂直 方向 上 的 对 齐 方向 ，box-align 属性 的 语法 格式 如 下 。 
box-align: start | end | center | baseline | stretch; 


box-align 的 相关 属性 值 说 明 如 表 12-7 所 示 。 
表 12-7 box-align 属性 值 说 明 


本 号 司 说 明 

二 十 设置 box-align 属性 为 start， 表 示 子 容器 从 父 容器 的 顶部 开始 排列 ， 富 余 空间 将 显示 在 盒子 的 底部 

[SnaL Li 设置 box-align 属性 为 end， 表 示 子 容器 从 父 容器 的 底部 开始 排列 ， 富 余 空间 将 显示 在 盒子 的 顶部 

[i 设置 box-align 属性 为 center， 表 示 子 容器 横向 居中 ， 富 余 空 间 在 子 容器 的 两 侧 分 配 ， 上 下 各 一 半 

[ESEine il 设置 box-align 属性 为 baseline， 表 示 所 有 盒子 沿 着 它们 的 基线 排列 ， 富 余 空 间 可 以 前 后 显示 
设置 box-align 属性 为 stretch， 表 示 每 个 子 元 素 的 高 度 被 调整 到 适合 盒子 的 高 度 显示 ， 即 所 有 子 
容器 和 父 容器 将 保持 同一 高 度 





在 以 前 很 难 实现 页 面 元 素 在 网 页 中 的 水 平和 垂直 方向 同时 居中 显示 的 效果 ， 通 常 需要 借助 于 其 
他 的 脚本 代码 来 实现 ， 需 要 编写 大 量 的 代码 ， 还 会 遇 到 兼容 性 的 问题 。 而 在 CSS 3 中 ， 通 过 新 增 的 
box-pack 属性 和 box-align 属性 ， 可 以 轻松 地 将 元 素 放置 在 页 面 中 水 平 居中 和 垂直 居中 的 位 置 。 


实现 元 素 水 平 垂直 居中 显示 
最 终 文 件 : 光盘 \ 最 终 文件 \ 第 12 章 \12-2-7.html 。 视频: 光盘 \ 视 频 \ 第 12 章 \12-2-7.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 12 章 \12-2-7.html”， 页 面 效果 如 图 12-16 所 示 。 转 换 到 代 
码 视图 中 ， 可 以 看 到 该 页 面 的 HTML 代码 ， 如 图 12-17 所 示 。 





<!doctype html> 
<html> 
<head> 
|<meta charset="utf-8"> 
<title> 实 现 元 素 水 平 委 直 居中 显示 </title> 
<Link href="style/12-2-7.css" rel="stylesheet" type= 
"text/css"> 
</head> 


<body> 
<div id="box"> 
<div id="logo"><img src="images/122763.png" width="341" 
height="126" alt=""/></div> 
</div> 
</body> 
| |</html> 


图 12-16 图 12-17 
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[E 瓦 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 可 以 看 到 页 面 的 CSS 样式 代码 ， 如 图 12-18 
所 示 。 在 Chrome 浏览 器 中 预览 页 面 ， 页 面 中 名 称 为 logo 的 Div 中 的 图 像 默认 显示 在 页 面 的 左上 角 
位 置 ， 如 图 12-19 所 示 。 














} 
hem ,bac 

。 oe ee PHOTO DESIGN 
} 





th: 3 
hetght: 126px; 














图 12-18 图 12-19 


国 5 ”返回 外 部 CSS 样式 表 文件 中 ， 在 名 为 #box 的 CSS 样式 设置 代码 中 添加 相应 的 CSS 样式 
设置 ， 如 图 12-20 所 示 。 保 存 外 部 CSS 样式 表 文 件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 页 
面 中 名 称 为 logo 的 Div 中 的 图 像 显 示 在 页 面 水 平和 垂直 居中 的 位 置 ， 如 图 12-21 所 示 。 


sbox € 
width: 100%; 
height: 100%; 
background-image: url(../images/122702.png); 
background-repeat: repeat: 


























display: box; 
display: -webkit-box; 
display: -moz-box; OU A 下 RG ) 
box-pack: center; 
-webkit-box-pack: center; 
-moz-box-pack: center; 
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box-align: center; 
-webkit-box-align: center; 
-moz-box-atign: center; 














图 12-20 图 12-21 
在 名 为 #box 的 CSS 样式 中 首先 添加 display:box 设置 代码 ， 将 该 Div 设置 为 
弹性 盒 模型 ， 接 着 设置 box-pack 属性 为 center， 使 弹性 盒 模型 中 的 元 素 水 平 居中 ， 
设置 box-align 属性 为 center， 使 弹性 盒 模型 中 的 元 素 垂 直 居中 。 


在 CSS 3 出 现 之 前 ， 很 难 实现 将 元 素 与 页 面 的 底部 对 齐 ， 而 通过 CSS 3 中 新 增 的 box-pack 
属性 和 box-align 属性 ， 能 够 轻松 地 实现 元 素 底部 对 齐 效果 。 


实现 元 素 底部 对 齐 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 12 章 \12-2-8.html 视频: 光盘 \ 视 频 \ 第 12 章 \12-2-8.mp4 
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”打开 页 面 “ 光 盘 \ 源 文件 \ 第 12 章 \12-2-8.html”， 页 面 效果 如 图 12-22 所 示 。 在 Chrome 
浏览 器 中 预览 页 面 ， 可 以 看 到 所 实现 的 元 素 在 页 面 中 水 平和 垂直 居中 对 齐 的 效果 ， 如 图 12-23 所 示 。 


CE 






































































































































图 12-22 图 12-23 
区 2 出” 返回 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 ， 找 到 名 为 #box 的 CSS 样式 设置 代码 ， 如 图 12-24 
所 示 。 对 该 CSS 样式 设置 代码 中 的 box-align 属性 设置 进行 修改 ， 如 图 12-25 所 示 。 
width: 1665 width: 168%; 
height: 166%| height: 1665% 
background-image: url(../images/122762.png) background-image: url(../images/122762.png) 
background-repeat: repeat background-repeat: repeat 
display: box display: box 
display: -webkit-box display: -webkit-box 
display: -moz-box display: -moz-box 
box-pack: center box-pack: center 
-webkit-box-pack: center -webkit-box-pack: center 
-moz-box-pack: center -moz-box-pack: center 
box-align: center box-align: end 
-webkit-box-align: center -webkit-box-align: end 
-moz-box-align: center -moz-box-align: end 
图 12-24 图 12-25 
葬 3 蜀 保存 外 部 CSS 样式 表 文件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 元 素 在 页 面 中 水 平 居 
































中 和 垂直 居 底 的 显示 效果 , 如 图 12-26 所 示 。 无 论 如 何 修改 浏览 器 窗口 的 大 小 , 元 素 始终 与 底部 对 齐 ， 
如 图 12-27 所 示 。 














2015/HTMLS+CSS3+jQuery/ 源 文件 /第 12 章 /12-2-8.html 


: OUATRO 
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在 名 为 #box 的 CSS 样式 中 设置 box-pack 属性 为 center， 使 弹性 盒 模型 中 
的 元 素 水 平 居 中 , 设置 box-align 属性 为 end, 使 弹性 盒 模 型 中 的 元 素 紧 贴 底部 对 齐 。 





盒 模型 是 网 页 设计 中 最 基本 、 最 重要 的 模型 。CSS 3 新 增 的 与 盒 模型 有 关 的 属性 如 盒子 阴影 、 
盒子 尺寸 和 溢出 处 理 等 ， 为 前 端 设计 师 带 来 更 多 的 便利 及 人 性 化 设计 。 





在 CSS 3 中 新 增 了 为 元 素 添加 阴影 的 新 属性 box-shadow， 通 过 该 属性 可 以 轻松 地 实现 网 页 中 
元 素 的 阴影 效果 。 
box-shadow 属性 的 语法 格式 如 下 。 


box-shadow: none | [inset]? [<length>] {2,4} [<color>]?; 


box-shadow 的 相关 属性 值 说 明 如 表 12-8 所 示 。 
表 12-8 box-shadow 属性 值 说 明 


性 全 | 
[one 捧 认 值 ， 表 示 没有 阴影 
[SU LU 可 选 值 ， 表 示 设置 阴影 的 类 型 为 内 阴影 ， 默 认为 外 阴影 


是 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 可 以 取 负 值 。4 个 length 分 别 表示 阴影 的 水 
平 偏 移 、 垂 直 偏 移 、 模 糊 距离 和 阴影 大 小 ， 其 中 水 平 偏 移 和 垂直 偏 移 是 必需 的 值 ， 模 糊 
半径 和 阴影 大 小 可 选 


[COAL LU 可 选 值 该 属性 值 用 于 设置 阴影 的 颜色 


完整 的 阴影 属性 值 包含 6 个 参数 值 : 阴影 类 型 、 水 平 偏 移 长 度 、 垂 直 偏 移 长 度 、 模 糊 半径 、 阴 影 
大 小 和 阴影 颜色 ， 其 中 水 平 偏 移 长 度 和 垂直 偏 移 长 度 是 必需 的 ， 其 他 的 参数 都 可 以 有 选择 地 省 略 。 










元 素 阴影 box-shadow 属性 和 文本 阴影 text-shadow 属性 看 起 来 很 相像 ， 但 
国 是 它们 的 语法 是 有 所 区 别 的 ， 元 素 阴影 主要 应 用 于 页 面 元 素 ， 而 文本 阴影 则 应 用 于 
文字 。 


为 网 页 元 素 添加 阴影 效果 

最 终 文件 : 光盘 \ 最 终 文件 \ 第 12 章 \12-3-1.html ”视频 : 光盘 \ 视 频 \ 第 12 章 \12-3-1.mp4 
四 执行 “文件 > 打开 ”命令 , 打开 页 面 “ 光 盘 \ 源 文件 \ 第 12 章 \12-3-1.html”, 效果 如 图 12-28 所 示 。 
转换 到 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 #pic 的 CSS 样式 设置 代码 ， 如 图 12-29 所 示 。 
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#pic { 
height: 553px; 
width: 826px; 
margin: S50px auto 9px auto; 
border: solid 8px #FFF; 

















图 12-29 


国王 。 在 该 样式 代码 中 添加 定义 元 素 阴 影 的 box-shadow 属性 设置 代码 ,如 图 12-30 所 示 。 保 存 页 面 ， 
并 保存 外 部 CSS 样式 表 文件 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 页 面 中 元 素 阴影 的 效果 ,如 图 12-31 所 示 。 





#pic { 
height: 553px; 
width: 826px; 
margin: S50px auto Opx auto; 
border: solid 8px #FFF; 
box-shadow: 12px 12px 26px #666; 














图 12-30 


此 处 在 box-shadow 属性 中 设置 了 阴影 的 水 平 偏 移 值 、 垂 直 偏 移 值 、 模 糊 半径 
和 阴影 颜色 ， 没 有 设置 阴影 的 类 型 ， 所 以 默认 的 阴影 类 型 为 外 部 阴影 。 





当 为 一 个 盒 元 素 同时 设置 border、padding 和 width 或 height 属性 时 ， 在 不 同 的 浏览 器 下 ， 
会 有 不 同 的 尺寸 。 特 别 是 在 IE 浏览 器 中 ，width 和 height 是 包含 border 和 padding 的 ， 标 准 的 
width 和 height 是 不 包含 border 和 padding 的 。 为 此 , 要 写 大 量 的 hack, 以 满足 不 同 浏览 器 的 需要 。 

CSS 3 对 盒 模型 进行 了 改善 ， 新 增 的 box-sizing 属性 可 用 于 定义 width 和 height 的 计算 方法 ， 
可 自由 定义 是 否 包 含 border 和 padding。 

box-sizing 属性 的 语法 格式 如 下 。 


box-sizing: content-box | padding-box | border-box | inherit; 


box-sizing 的 属性 值 说 明 如 表 12-9 所 示 。 
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表 12-9 box-sizing 属性 值 说 明 
说 明 


四 说 有 明 | 
默认 值 ， 计 算 方法 为 width/height=content， 表 示 指 定 的 宽度 和 高 度 仅 限 内 容 区 域 ， 边 
框 和 内 边框 的 宽度 不 包含 在 内 








计算 方法 为 width/height=content+padding， 表 示 指 定 的 宽度 和 高 度 包含 内 边 距 和 内 
容 区 域 ， 边 框 宽度 不 包含 在 内 


计算 方法 为 width/height=content+padding+border， 表 示 指 定 的 宽度 和 高 度 包含 边 
框 、 内 边 距 和 内 容 区 域 
[men 表示 继承 父 元 素 中 box~sizing 属性 的 值 


设置 网 页 元 素 尺寸 大 小 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 12 章 \12-3-2.html 。 视频 : 光盘 \ 视 频 \ 第 12 章 \12-3-2.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 12 章 \12-3-2.html”， 效 果 如 
图 12-32 所 示 。 在 Firefox 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 中 两 个 元 素 的 宽度 是 相同 的 ， 效 果 如 
图 12-33 所 示 。 

















图 12-32 图 12-33 


EaE 旺 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 代 到 名 为 #title 的 CSS 样式 设置 代码 ， 
在 该 CSS 样式 代码 中 添加 box-sizing 属性 设置 ， 如 图 12-34 所 示 。 保 存 外 部 样式 表 文 件 ， 在 
Firefox 浏览 器 中 预览 该 页 面 ， 可 以 看 到 页 面 中 该 元 素 的 宽度 效果 ， 如 图 12-35 所 示 。 


#title { 
width: 81lpx; 
height: auto; 
overflow: hidden; 
background-color: rgba(6,6,6,6.5); 
text-align: center; 
font-size: 24px; 
font-weight: bold; 
margin: 10px auto; 
border: solid 12px #FFF; 
paddi Opx; 











izing: border-box; 





border-box; 











图 12-34 图 12-35 


辐 轴 ”返回 外 部 CSS 样式 表 文件 中 ， 在 名 为 #title 的 CSS 样式 设置 代码 中 修改 box-sizing 属性 
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的 属性 值 ， 如 图 12-36 所 示 。 保 存 外 部 样式 表 文件 ， 在 Firefox 浏览 器 中 预览 该 页 面 ， 可 以 看 到 页 
面 中 该 元 素 的 宽度 效果 ， 如 图 12-37 所 示 。 


#titte f 
width: 811px; 
height: auto; 
overflow: hidden; 





background-color: rgba(6,6,6,6.5); 
text-align: center; 
font-size: 24px; 
font-weight: bold; 
margin: 16px auto; 
border: solid 12px #FFF; 
padding: 26px; 
adding-box; 
-webkit-box-sizing: padding-box; 





-moz-box-sizing: padding-box; 














图 12-36 图 12-37 


添加 box-sizing 属性 设置 ， 由 于 元 素 尺寸 的 计算 方式 不 同 ， 元 素 的 总 尺寸 也 不 
相同 。 因 为 IE 浏览 器 与 webkit 内 核 的 Chrome 浏览 器 都 不 支持 padding-box 属 
性 值 ， 所 以 在 这 两 个 浏览 器 中 属性 值 为 padding-box 的 效果 与 属性 值 为 content- 

box 的 效果 相同 。 





在 CSS 2 规范 中 ， 就 已 经 有 处 理 溢出 的 overflow 属性 ， 该 属性 定义 当 盒子 的 内 容 超出 盒子 边界 
时 的 处 理 方法 。CSS 3 新 增 的 overflow-x 和 overflow-y 属性 ， 是 对 overflow 属性 的 补充 ， 分 别 
表示 水 平方 向 上 的 溢出 处 理 和 垂直 方向 上 的 溢出 处 理 。 

overflow-x 和 overflow-y 属性 的 语法 格式 如 下 。 


overflow-x: visible | auto | hidden | scroll | no-display | no-content; 


overflow-y: visible | auto | hidden | scroll | no-display | no-content; 


overflow-x 和 overflow-y 的 属性 值 说 明 如 表 12-10 所 示 。 
表 12-10 overflow-x 和 overflow-y 属性 值 说 明 


”属性 值 EE 

[ioe 扶 认 值 ， 会 子 内 容 溢 出 时 ， 不 裁剪 溢出 的 内 容 ， 超 出 盒子 边界 的 部 分 将 显示 在 盒 元 素 之 外 
国 引 会 子 溢出 Hj， 显示 流动 条 

a 二 会 子 溢出 时 ， 溢 出 的 内 容 将 被 裁剪 ， 并 且 不 显示 滚动 条 

[SC 始 作 显 示 滚动 条 

maaan 当 盒子 溢出 时 ， 不 显示 元 素 ， 该 属性 值 是 新 增 的 

Reena 当 会 子 溢出 时 ， 不 显示 内 容 ， 该 属性 值 是 新 增 的 
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CSS 的 排版 是 一 种 比较 新 的 排版 理念 ， 完 全 有 别 于 传统 的 排版 方式 。 它 将 页 面 首先 在 整体 上 
进行 <div> 标签 的 分 块 ， 然 后 对 各 个 块 进行 CSS 定位 ， 最 后 再 在 各 个 块 中 添加 相应 的 内 容 。 通 过 
CSS 排版 的 页 面 ， 更 新 十 分 容易 ， 甚 至 是 页 面 的 拓扑 结构 ， 都 可 以 通过 修改 CSS 属性 来 重新 定位 。 


在 使 用 Div+CSS 布局 制作 页 面 的 过 程 中 ， 都 是 通过 CSS 的 定位 属性 对 元 素 完成 位 置 和 大 小 的 
控制 的 。 定 位 就 是 精确 地 定义 HTML 元 素 在 页 面 中 的 位 置 ， 可 以 是 页 面 中 的 绝对 位 置 ， 也 可 以 是 相 
对 于 父 级 元 素 或 男 一 个 元 素 的 相对 位 置 。 

position 属性 是 最 主要 的 定位 属性 ，position 属性 既 可 以 定义 元 素 的 绝对 位 置 ， 又 可 以 定义 元 素 
的 相对 位 置 。 

position 属性 的 语法 格式 如 下 。 


position: static | absolute | fixed | relative; 


position 的 相关 属性 值 说 明 如 表 12-11 所 示 。 


表 12-11 position 属性 值 说 明 

说 明 
设置 position 属性 值 为 static， 表 示 无 特殊 定位 ， 元 素 定位 的 默认 值 ， 对 象 遵 循 HTML 
元 素 定 位 规则 ， 不 能 通过 z-index 属性 进行 层次 分 级 
设置 position 属性 值 为 absolute， 表 示 绝 对 定位 ， 相 对 于 其 父 级 元 素 进行 定位 ， 元 素 
的 位 置 可 以 通过 top、right、bottom 和 left 等 属性 进行 设置 
设置 position 属性 为 fxXed， 表 示 悬 浮 ， 使 元 素 固定 在 屏幕 的 某 个 位 置 ， 其 包含 块 是 可 
视 区 域 本 身 ， 因 此 它 不 随 滚动 条 的 滚动 而 滚动 ，IE5.5+ 及 以 下 版 本 浏览 器 不 支持 该 属性 
设置 position 属性 为 relative， 表 示 相 对 定位 ， 对 象 不 可 以 重 芭 ， 可 以 通过 top、 
right、bottom 和 left 等 属性 在 页 面 中 偏 移 位 置 ， 可 以 通过 z-index 属性 进行 层次 分 级 

















在 CSS 样式 中 设置 了 position 属性 后 ， 还 可 以 对 其 他 的 定位 属性 进行 设置 ， 包 括 width、 
height、 z-index、top、right、bottom、left、overflow 和 clip， 其 中 top、right、bottom 和 left 
只 有 在 position 属性 中 使 用 才 会 起 到 作用 。 

其 他 定位 相关 属性 如 表 12-12 所 示 。 


表 12-12 其 他 定位 相关 属性 说 明 
top 属性 用 于 设置 元 素 垂直 距 顶 部 的 距离 ; right 属性 用 于 设置 元 素 水 平 距 右 部 的 距离 ; 
bottom 属性 用 于 设置 元 素 垂 直 距 底部 的 距离 ; left 属性 用 于 设置 元 素 水 平 距 左 部 的 距离 
z-index 属性 用 于 设置 元 素 的 层 埃 顺序 
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设置 position 属性 为 relative， 即 可 将 元 素 的 定位 方式 设置 为 相对 定位 。 对 一 个 元 素 进行 相对 定 
位 ， 首 先 它 将 出 现在 它 所 在 的 位 置 上 。 然 后 通过 设置 垂直 或 水 平 位 置 ， 让 这 个 元 素 相 对 于 它 的 原始 起 
点 进行 移动 。 另 外 ， 在 相对 定位 时 ， 无 论 是 否 进行 移动 ， 元 素 仍然 占据 原来 的 空间 。 因 此 ， 移 动 元 素 
会 导致 它 覆 盖 其 他 元 素 。 


实现 网 页 元 素 的 又 加 显示 
最 终 文件 : 光盘 \ 最终 文件 \ 第 12 章 \12-4-2.html 视频; 光盘 \ 视 频 \ 第 12 章 \12-4-2.mp4 


I 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 12 章 \12-4-2.html”, 效果 如 图 12-38 所 示 。 
将 光标 移 至 名 为 pic 的 Div 中 ,将 多 余 的 文字 删除 , 插入 图 像 “ 光 盘 \ 源 文件 \ 第 12 章 \images\124203. 
jpg”， 效 果 如 图 12-39 所 示 。 














图 12-38 图 12-39 


四 2 转换 到 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 #pic 的 CSS 样式 ， 在 该 CSS 样式 中 添加 相应 
的 相对 定位 代码 ， 如 图 12-40 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 
可 以 看 到 网 页 元 素 相 对 定位 的 效果 ， 如 图 12-41 所 示 。 








#pic { 
position: relative; 
width: 88px; 
height: 89px; 
left: 235px; 
top: -203px; 














图 12-40 图 12-41 
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提示 此 处 在 CSS 样式 代码 中 设置 元 素 的 定位 方式 为 相对 定位 ， 使 元 素 相 对 于 原 位 置 
向 右 移 动 了 235 像素 ， 向 上 移动 了 203 像素 。 


提示 在 使 用 相对 定位 时 ， 无 论 是 否 进行 移动 ， 元 素 仍然 占据 原来 的 空间 。 因 此 ， 移 
动 元 素 会 导致 它 履 盖 其 他 框 。 





设置 position 属性 为 absolute， 即 可 将 元 素 的 定位 方式 设置 为 绝对 定位 。 绝 对 定位 是 参照 浏览 
器 的 左上 角 ， 配 合 top、right、bottom 和 left 进行 定位 的 ， 如 果 没 有 设置 上 述 的 4 个 值 ， 则 默认 的 
依据 父 级 元 素 的 坐标 原点 为 原始 点 。 

在 父 级 元 素 的 position 属性 为 默认 值 时 ，top、right、bottom 和 left 的 坐标 原点 以 body 的 坐 
标 原点 为 起 始 位 置 。 


网 页 元 素 固定 在 右 侧 显示 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 12 章 \12-4-3.html 。 视频 : 光盘 \ 视 频 \ 第 12 章 \12-4-3.mp4 


[ES 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 12 章 \12-4-3.html”， 效 果 如 
图 12-42 所 示 。 将 光标 移 至 名 为 link 的 Div 中 ， 将 多 余 的 文字 删除 ， 插 入 图 像 “光盘 \ 源 文件 \ 第 
12 章 \mages\124301.jpg”， 效 果 如 图 12-43 所 示 。 








图 12-42 图 12-43 


[到 量 ”转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 剂 nk 的 CSS 样式 ， 在 该 CSS 
样式 中 添加 相应 的 绝对 定位 代码 ， 如 图 12-44 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 表 文 件 ， 在 
浏览 器 中 预览 页 面 ， 可 以 看 到 网 页 中 元 素 绝对 定位 的 效果 ， 如 图 12-45 所 示 。 
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#Link { 
position: absolute; 
width: 59px; 
height: 293px; 
right: 10px; 
top: 200px; 


























图 12-44 图 12-45 


在 名 为 #link 的 CSS 样式 设置 中 ， 通 过 设置 position 属性 为 absolute, 将 id 
名 为 link 的 Div 设置 为 绝对 定位 ， 通 过 设置 right 属性 为 10 像素 ,将 id 名 为 link 的 
Div 显示 在 距离 浏览 器 右边 界 10 像素 的 位 置 ， 通 过 设置 top 属性 为 200 像素 , 将 id 
名 为 link 的 Div 显示 在 距离 浏览 器 上 边界 200 像素 的 位 置 。 


对 于 定位 的 主要 问题 是 要 记 住 每 种 定位 的 意义 。 相 对 定位 时 相对 于 元 素 在 文档 
流 中 的 初始 位 置 ， 而 绝对 定位 时 相对 于 最 近 的 已 定位 的 父 元 素 ， 如 果 不 存 在 已 定位 
的 父 元 素 ， 就 相对 于 最 初 的 包含 块 。 因 为 绝对 定位 的 框 与 文档 流 无 关 ， 所 以 它们 可 
以 覆盖 页 面 上 的 其 他 元 素 。 可 以 通过 设置 z-index 属性 来 控制 这 些 框 的 堆放 次 序 。 
z-index 属性 的 值 越 大 ， 框 在 堆 中 的 位 置 就 越 高 。 





设置 position 属性 为 fixed， 即 可 将 元 素 的 定位 方式 设置 为 固定 定位 。 固 定 定位 和 绝对 定位 
比较 相似 ， 它 是 绝对 定位 的 一 种 特殊 形式 ， 固 定 定位 的 容器 不 会 随 着 滚动 条 的 拖 动 而 变化 位 置 。 
在 视线 中 ， 固 定 定位 的 容器 位 置 是 不 会 改变 的 。 固 定 定位 可 以 把 一 些 特殊 效果 固定 在 浏览 器 的 视 
线 位 置 。 


实现 固定 位 置 的 导航 菜单 
最 终 文件 : 光盘 \ 最终 文件 \ 第 12 章 \12-4-4.html 。 视频 : 光盘 \ 视 频 \ 第 12 章 \12-4-4.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 12 章 \12-4-4.html”， 效 果 如 
12-46 所 示 。 在 浏览 器 中 预览 页 面 ， 发 现 顶 部 的 导航 菜单 会 跟着 滚动 条 一 起 滚动 ， 如 图 12-47 
所 示 。 








@278 





图 12-46 


图 12-47 
到 玖 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 共 op 的 CSS 样式， 如 图 12-48 
所 示 。 在 该 CSS 样式 代码 中 添加 相应 的 固定 定位 代码 ， 如 图 12-49 所 示 。 
#top { 

width: 166%; 

height: 49px; 








#top { 
pesition: fixed: 
width: 100%; 





height: 49px; 
background-color: #333; background-color: #333; 
border-bottom: solid lpx #000; border-bottom: solid lpx #660; 
line-height: 40px; 
昌 








Line-height: 40px; 








图 12-48 图 12-49 
天国 保存 页 面 ， 并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 效果 ， 如 图 12-50 
所 示 。 拖 动 浏览 器 滚动 条 ， 发 现 顶部 导航 菜单 始终 固定 在 浏览 器 顶部 不 动 ， 如 图 12-51 所 示 。 





图 12-50 图 12-51 





固定 定位 的 参照 位 置 不 是 上 级 元 素 块 而 是 浏览 器 窗口 。 所 以 可 以 使 用 固定 定位 
来 设 定 类 似 传统 框架 样式 布局 ， 以 及 广告 框架 或 导航 框架 等 。 使 用 固定 定位 的 元 素 
可 以 脱离 页 面 ， 无 论 页 面 如 何 滚动 ， 始 终 处 在 页 面 的 同一 位 置 上 。 
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除了 使 用 position 属性 进行 定位 外 ， 还 可 以 使 用 float 属性 定位 。float 定位 只 能 在 水 平方 向 上 定 
位 ， 而 不 能 在 垂直 方向 上 定位 。float 属性 表示 浮动 属性 ， 它 用 来 改变 元 素 块 的 显示 方式 。 

浮动 定位 是 CSS 排版 中 非常 重要 的 手段 。 浮 动 的 框 可 以 左右 移动 ， 直 到 它 外 边缘 碰 到 包含 框 或 
另 一 个 浮动 框 的 边缘 。 

float 属性 语法 格式 如 下 。 











float: none | left | right; 


float 的 相关 属性 值 说 明 如 表 12-13 所 示 。 
表 12-13 float 属性 值 说 明 


”属性 值 | 说 明 
n 设置 fioat 属性 为 none， 表 示 元 素 不 浮动 
上 设置 float 属性 为 left， 表 示 元 素 向 左 浮动 
Tright .设置 float 属性 为 right， 表 示 元 素 向 右 浮动 






浮动 定位 是 在 网 页 布局 制作 过 程 中 使 用 最 多 的 定位 方式 ， 通 过 设置 浮动 定位 可 以 将 网 页 中 的 块 状 
元 素 在 一 行 中 显示 。 


制作 顺序 排列 的 图 像 列 表 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 12 章 \12-4-5.html 。 视频: 光盘 \ 视 频 \ 第 12 章 \12-4-5.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “ 光 盘 \ 源 文件 \ 第 12 章 \12-4-5.html”， 效 果 如 
图 12-52 所 示 。 转 换 到 外 部 CSS 样式 表 文 件 中 ， 分 别 创建 名 为 #pic1、#pic2 和 #pic3 的 CSS 样 
式 代码 ， 如 图 12-53 所 示 。 








spicl { 
width: 214px; 
height: 114px; 
background-color: #FFF; 
margin: 10px; 
padding: Spx; 
Dn rtfolin } 
Portfolio a 
width: 214px; 
height: 114px; 
background-color: #FFF; 
margin: 18px; 
padding: Spx; 


spic3 { 
width: 214px; 
height: 114px; 
background-color: #FFF; 
margin: 10px; 
padding: Spx; 











} 





图 12-52 图 12-53 


Oz 将 id 名 为 pic1 的 Div 向 右 浮动 ， 在 名 为 #pic1 的 CSS 样式 代码 中 添加 右 浮动 代码 ， 如 图 
12-54 所 示 。 返 回 设计 视图 中 ， 可 以 看 到 id 名 为 pic1 的 Div 脱离 文档 流 并 向 右 浮动 ， 直 到 该 Div 的 
边缘 碰 到 包含 框 box 的 右边 框 ， 如 图 12-55 所 示 。 
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#picl { 
width: 214px; 
height: 114px; 
background-color: #FFF; 
margin: 10px; 
padding: Spx; 
float: right; 














图 12-54 图 12-55 
葬 转换 到 外 部 样式 表 文件 中 ， 将 id 名 为 pic1 的 Div 向 左 浮动 ， 在 名 为 #pic1 的 CSS 样式 代 
码 中 添加 左 浮动 代码 ， 如 图 12-56 所 示 。 返 回 网 页 设计 视图 ， 将 id 名 为 pic1 的 Div 向 左 浮动 ，id 
名 为 pic2 的 Div 被 遮盖 了 ， 如 图 12-57 所 示 。 








#picl { 
width: 214px; 
height: 114px; 
background-color: #FFF; 
margin: 10px; 
padding: Spx; 


float: left; 














图 12-56 图 12-57 


当 id 名 为 pic1 的 Div 脱离 文档 流 并 向 左 浮动 时 ， 直 到 它 的 边缘 碰 到 包含 box 
提示 的 左边 缘 。 因 为 它 不 再 处 于 文档 流 中 ， 所 以 它 不 占据 空间 ， 实 际 上 覆盖 住 了 id 名 
为 pic2 的 Div， 使 pic2 的 Div 从 视图 中 消失 ， 但 是 该 Div 中 的 内 容 还 占据 着 原来 

的 空间 。 


加 一 转 换 到 外 部 CSS 样式 表 文 件 中 ， 分 别 在 #pic2 和 #pic3 的 CSS 样式 中 添加 向 左 浮动 代码 ， 
如 图 12-58 所 示 。 将 这 3 个 Div 都 向 左 浮动 , 返回 网 页 设计 视图 , 可 以 看 到 页 面 效 果 , 如 图 12-59 所 示 。 


spic2 
width: 214px; 
height: 114px; 
background-color: #FFF; 
margin: 10px; 
padding: Spx; 
float: left; 





} 
#pic3 { 
width: 214px; 
height: 114px; 
background-color: #FFF; 
margin: 10px; 
padding: Spx; 
float: left; 














图 12-58 图 12-59 
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提示 将 3 个 Div 都 向 左 浮动 ， 那 么 id 名 为 pic1 的 Div 向 左 浮动 直到 碰 到 包含 box 
的 左边 缘 ， 另 两 个 Div 向 左 浮动 直到 磁 到 前 一 个 浮动 Div。 








[王国 返回 网 页 设计 视图 ， 在 id 名 为 pic3 的 Div 之 后 分 别 插入 id 名 为 pic4 至 pic6 的 Div， 并 在 
各 Div 中 插入 相应 的 图 像 ， 如 图 12-60 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 页 面 代码 ， 如 图 12-61 
所 示 。 























图 12-60 图 12-61 


在 网 页 中 分 为 行内 元 素 和 块 元 素 ， 行 内 元 素 是 可 以 显示 在 同一 行 上 的 元 素 ， 例 
园 如 <span>; 块 元 素 是 占据 整 行 空间 的 元 素 ， 例 如 <div>。 如 果 需 要 将 两 个 <div> 
显示 在 同一 行 上 ， 就 需要 使 用 float 属性 。 





区 。” 转 换 到 12-5-5.css 文件 中 , 定义 名 为 #pic4,#pic5,#pic6 的 CSS 样式 , 如 图 12-62 所 示 。 
保存 页 面 ， 并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 效 果 , 如 图 12-63 所 示 。 





#pic4,#pic5,#pic6 { 
width: 214px; 
height: 114px; 
background-color: #FFF; 
margin: 19px; 
padding: 5px; 
float: left; 














图 12-62 


i 如 果 包 含 框 太 窗 ， 无 法 容纳 水 平 排列 的 多 个 浮动 元 素 ， 那 么 其 他 浮动 元 素 将 向 
提示 产 “下 移动 ， 直 到 有 足够 空间 的 地 方 。 如 果 浮 动 元 素 的 高 度 不 同 ， 那 么 当 它 们 向 下 移动 
时 可 能 会 被 其 他 浮动 元 素 卡 住 。 
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在 界面 设计 方面 ， 为 了 增强 用 户 体验 ， 设 计 师 会 想 尽 办 法 来 实现 理想 的 页 面 效 果 ， 也 因此 增加 了 
许多 工作 量 。CSS 3 在 用 户 界 面 设计 方面 有 很 大 的 改进 ， 人 允许 改变 元 素 尺寸 、 设 置 元 素 外 轮廓 线 、 
改变 焦点 导航 顺序 、 让 元 素 变 身 ， 以 及 给 元 素 添加 内 容 等 。 


在 CSS 3 中 新 增 了 区 域 缩 放 调节 的 功能 设置 ， 通 过 新 增 的 resize 属性 ， 就 可 以 实现 页 面 中 元 素 
的 区 域 缩放 操作 ， 调 节 元 素 的 尺寸 大 小 。 
resize 属性 的 语法 格式 如 下 。 


resize: none | both | horizontal | vertical | inherit; 


resize 的 相关 属性 值 说 明 如 表 12-14 所 示 。 
表 12-14 resize 属性 值 说 明 


”属性 值 | 说 有 明 
7 不 提 供 元 素 尺寸 调整 机 制 ， 用 户 不 能 操纵 调节 元 素 的 尺寸 
[EGG 提供 元 素 尺寸 的 双向 调整 机 制 ， 让 用 户 可 以 调节 元 素 的 宽度 和 高 度 
[EGR 提供 元 素 尺寸 的 单 向 水 平方 向 调整 机 制 ， 让 用 户 可 以 调节 元 素 的 宽度 
[AGRICSILLLLLLL LU 提供 元 素 尺寸 的 单 向 垂直 方向 调整 机 制 ， 让 用 户 可 以 调节 元 素 的 高 度 
ineit 默认 继承 


resize 属性 需要 和 溢出 处 理 属 性 overflow、overflow-x 或 overflow-y 一 起 使 
用 ， 才 能 把 元 素 定 义 成 可 以 调整 大 小 的 效果 ， 且 溢出 属性 值 不 能 为 visible。 





实现 网 页 元 素 尺 寸 任意 缩放 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 12 章 \12-5-1.html 。 视频 : 光盘 \ 视 频 \ 第 12 章 \12-5-1.mp4 


[GE 执行 “文件 > 打开 ”命令 ,打开 页 面 “ 光 盘 \ 源 文件 \ 第 12 章 \12-5-1.html”， 效 果 如 
12-64 所 示 。 和 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 在 名 为 #ext 的 CSS 样式 中 添加 
resize 属性 设置 ， 如 图 12-65 所 示 。 





i #text { 

position: absolute; 
width: 400px; 
height: auto; 
overflow: hidden; 
top: 150px; 

left: 50%; 
margin-left: -200px; 
padding: 15px; 
background-color: rgba(0,0,0,0.4); 
resize: both; 














图 12-64 图 12-65 
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葬 酌 ”保存 外 部 CSS 样式 文件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 的 效果 ， 如 
12-66 所 示 。 在 网 页 中 可 以 使 用 鼠标 拖 动 id 名 为 text 的 Div， 从 而 调整 该 Div 的 大 小 ， 如 图 12-67 
所 示 。 














图 12-66 图 12-67 


在 本 实例 的 CSS 样式 中 设置 resize 属性 为 both， 并 且 设 置 overflow 属性 为 
hidden， 这 样 在 浏览 器 中 预览 页 面 时 ， 可 以 在 网 页 中 任意 调整 该 元 素 的 大 小 。 

CSS 3 中 新 增 的 resize 属性 ， 可 以 为 页 面 中 其 他 元 素 应 用 ， 同 样 可 以 起 到 调整 
大 小 的 效果 。 





CSS 3 中 新 增 的 outline 属性 可 以 为 元 素 添加 外 轮廓 线 ， 以 突出 显示 元 素 。 外 轮廓 线 看 起 来 很 像 
元 素 边框 ， 而 且 语法 也 与 边框 非常 类 似 ， 但 是 外 轮廓 线 不 点 用 元 素 的 尺寸 。 
outline 属性 的 语法 格式 如 下 。 


outline: [outline-color] || [outline-style] || [outline-width] | inherit; 
outline 的 相关 属性 值 说 明 如 表 12-15 所 示 。 


表 12-15 outline 属性 值 说 明 


”属性 值 | 说 ”了 明 
[Cutimescolor | 该 属性 值 用 于 指定 轮廓 边框 的 颜色 
Cutimesstye 该 属性 值 用 于 指定 轮廓 边框 的 样式 


二 该 属性 值 用 于 指定 轮廓 边框 的 宽度 
[en 黑 认 丝 承 








outline 属性 与 border 属性 有 很 多 相似 的 地 方 ， 但 也 有 很 大 的 不 同 。outline 属性 定义 的 外 轮廓 
总 是 封闭 的 、 完 全 闭合 的 ; 外 轮廓 线 也 可 能 不 是 矩形 ， 如 果 元 素 的 display 属性 值 为 inline， 外 轮 
廓 就 可 能 变 得 不 规则 。 
outline 属性 是 一 个 复合 属性 ， 它 包含 了 4 个 子 属性 : outline-width 属性 、outline-style 属性 、 
outline-color 属性 和 outline-offset 属性 。 
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》1. 轮廓 宽度 属性 outline-width 
outline-width 属性 用 于 定义 元 素 轮廓 的 宽度 ， 语 法 格式 如 下 。 


outline-width: thin | medium | thick | <length> | inherit; 


outline-width 的 相关 属性 值 说 明 如 表 12-16 所 示 。 
表 12-16 outline-width 属性 值 说 明 


大 收入 | 说 明 
而 时 该 必 性 值 表 示 较 细 的 轮廓 宽度 

[meaium 该 属性 值 为 默认 值 表示 中 等 的 轮廓 宽度 

[AiCA 该 必 性 值 表 示 较 相 的 轮廓 宽度 

EEnoth 该 属性 值 用 于 自 定义 轮廓 的 宽度 值 宽度 值 包含 长 度 单位 ， 不 允许 为 负 值 
[nert 该 属性 值 表示 继承 父 元 素 


》2. 轮廓 样式 属性 outline-style 
outline-style 属性 用 于 定义 元 素 轮廓 外 边框 的 轮廓 样式 ， 语 法 格式 如 下 。 


outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | 


outset | inherit; 


outline-style 的 相关 属性 值 说 明 如 表 12-17 所 示 。 
表 12-17 outline-style 属性 值 说 明 


大 全 从 | 说 明 
[Te 该 属性 值 表 示 没 有 轮 序 

Gate 该 属性 值 表 示 轮 廓 为 点 状 
1gashed 该 必 性 值 表 示 轮 廓 为 虚线 
[SCIGUR 该 属性 值 表 示 轮 廓 为 实 线 


[CCUUISGULLLL LU 该 属性 值 表 示 轮 廓 为 双 线 条 ， 双 线条 的 宽度 等 于 outine-width 属性 的 值 
[OO 该 属性 值 表 示 轮 廓 为 3D 止 模 ， 显 示 效果 取决 于 outline-color 属性 的 值 
[GAU 该 必 性 值 表 示 轮 序 为 3D 凸 槽 ， 显 示 效果 取决 于 outline-color 属性 的 值 
[SU 该 属性 值 表 示 轮 廓 为 3D 外边， 显示 效果 取决 于 outline-color 属性 的 值 
| 可 该 属性 值 表 示 轮 廓 为 3D 凸 边 ， 显 示 效 果 取 决 于 outline-color 属性 的 值 


[neril 该 属性 值 表 示 继承 父 元 素 


3》 3. 轮廓 颜色 outline-color 
outline-color 属性 用 于 定义 元 素 外 轮廓 边框 的 颜色 ， 语 法 格式 如 下 。 


outline-color: <color> | invert | inherit; 


outline-color 的 相关 属性 值 说 明 如 表 12-18 所 示 。 
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表 12-18 outline-color 属性 值 说 明 
说 明 
Ra 二 站 该 属性 值 用 于 自 定义 颜色 值 ，CSS 中 可 以 使 用 任何 颜色 ， 也 可 以 是 半 透 明 颜 色 
[er 该 属性 值 为 默认 值 ,执行 颜色 反 转 ， 以 保证 轮廓 在 任何 背景 下 都 是 可 见 的 
[NG 该 属性 值 表示 继承 父 元 素 


》4. 轮廓 偏 移 outline-offset 
outline-offset 属性 用 于 定义 元 素 外 轮廓 边框 与 元 素 边 界 的 距离 ， 语 法 格式 如 下 。 


outline-offset: <length> | inherit; 


outline-offset 的 相关 属性 值 说 明 如 表 12-19 所 示 。 
表 12-19 outline-offset 属性 值 说 明 


同性 值 | 说 有明 
区 Enoth> .该 属性 值 用 于 自 定义 轮廓 偏 移 的 距离 值 ， 包含 长 度 单位 ， 可 以 为 负 值 


[en 该 属性 什 表 示 继承 父 元 素 


在 复合 outline 的 语法 中 没有 包含 outline-offset 子 属性 ， 因 为 这 样 会 造成 长 度 
值 指定 不 明确 ， 无 法 正确 解析 。 


vv 为 网 页 元 素 添加 轮廓 外 边框 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 12 章 \12-5-2.html 视频: 光盘 \ 视 频 \ 第 12 章 \12-5-2.mp4 


[ES 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 12 章 \12-5-2.html”, 效果 如 图 12-68 所 示 。 
转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 #pic 的 CSS 样式 设置 代码 ， 如 图 12-69 
所 示 。 





#pic { 
height: 553px; 
width: 820px; 
margin: 59px auto Opx auto; 











图 12-69 





吨 3 蜀 ”在 该 CSS 样式 代码 中 添加 outline-width、outline-style 和 outline-color 属性 设置 代码 ， 
如 图 12-70 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 表 文 件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 
看 到 为 网 页 元 素 添加 的 轮廓 外 边框 的 效果 ， 如 图 12-71 所 示 。 


@@286 





#pic { 
height: 553px; 
width: 826px; 


margin: 50px auto 9px auto; 


outline-color: #333; 
outline-style: groove; 


outline-width: 10px; 








} 








图 12-70 图 12-71 


葬 畏 ”返回 外 部 CSS 样式 表 文件 中 ， 在 名 为 #pic 的 CSS 样式 中 添加 轮廓 偏 移 outline-offset 属 
性 设置 代码 ， 如 图 12-72 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 表 文件 ， 在 Chrome 浏览 器 中 预 
览 页 面 ， 可 以 看 到 为 网 页 元 素 所 添加 的 轮廓 外 边框 的 效果 ， 如 图 12-73 所 示 。 





#pic { 
height: 553px; 
width: 820px; 


margin: 50px auto Opx auto; 
outline-color: #333; 
outline-style: groove; 
outline-width: 10px; 














outline-offset: 16px;/*IE 不 支持 该 属 性 * 
图 12-72 


CSS 3 中 新 增 appearance 属性 ， 通 过 该 属性 可 以 方便 地 把 元 素 伪装 成 其 他 类 型 的 元 素 ， 给 网 
页 界面 设计 带 来 极 大 的 灵活 性 。 基 于 webkit 内 核 的 替代 私有 属性 是 -webkit-appearance， 基 于 
gecko 内 核 的 替代 私有 属性 是 -moz-appearance。 

appearance 属性 的 语法 格式 如 下 。 





appearance: normal | icon | window | button | menu | field; 


appearance 的 相关 属性 值 说 明 如 表 12-20 所 示 。 

表 12-20 appearance 属性 值 说 明 
| 说 有明 
[Ga 该 属性 值 表 示 正 常 的 修饰 元 素 


E65 该 属性 值 表示 把 元 素 修 饰 得 像 一 个 图 标 
winaow | 该 属性 值 表示 把 元 素 修饰 得 像 一 个 视窗 
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( 续 表 ) 


四 
ution 该 属性 值 表 示 把 元 素 修饰 得 像 一 个 按钮 
[Te 该 属性 值 表示 把 元 素 修饰 得 像 荣 单 


后 LU 该 属性 值 表 示 把 元 素 修饰 得 像 一 个 输入 框 


在 外 观 上 做 了 改变 。 由 于 受到 元 素 本 身 功 能 的 局 限 ， 不 是 每 一 个 元 素 都 可 以 任意 被 


需要 说 明 的 是 ， 使 用 appearance 属性 定义 的 元 素 ， 仍 然 保留 元 素 的 功能 ， 仅 
| 修饰 ， 但 是 恰当 的 修饰 大 部 分 是 可 行 的 。 


将 超 链接 文字 伪装 成 按钮 
最 终 文件 : 光盘 \ 最终 文件 \ 第 12 章 \12-5-3.html 。 视频 : 光盘 \ 视 频 \ 第 12 章 \12-5-3.mp4 


ES 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 12 章 \12-5-3.html”， 效 果 如 
12-74 所 示 。 为 页 面 中 相应 的 文字 创建 空 链接 , 可 以 看 到 默认 的 文字 超 链 接 效 果 , 如 图 12-75 所 示 。 


全 ni [本 pm 以 memarrexena ， 卡 








Dac(F) Falg(B) Falg (F) Sadel Handtag 








图 12-74 图 12-75 


四 2 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 #text a 的 CSS 样式 ， 如 
图 12-76 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 表 文 件 ， 在 Chrome 浏览 器 中 预览 页 面 ， 可 以 看 
到 超 链接 文字 的 效果 ， 如 图 12-77 所 示 。 





#text a { 
padding: 9px 15px; 
line-height: 30px; 
text-decoration: none; 
color: #F60; 














图 12-76 图 12-77 


[一 返 回 外 部 CSS 样式 表 文 件 中 ， 在 名 为 #ext a 的 CSS 样式 中 添加 伪装 元 素 appearance 
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属性 的 设置 ， 如 图 12-78 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 表 文 件 ， 在 Chrome 浏览 器 中 预 
览 页 面 ， 可 以 看 到 超 链接 文字 显示 为 按钮 的 外 观 ， 效 果 如 图 12-79 所 示 。 





#text a { 
padding: 6@px 15px; 
line-height: 36px; 
text-decoration: none; 


appearance: buttonj /zf 


-webkit-appearance: button; 
-moz-appearance: button; 

















图 12-78 


如 果 需 要 为 网 页 中 的 元 素 插入 内 容 ， 很 少 有 人 会 想到 使 用 CSS 样式 来 实现 。 在 CSS 样式 中 ， 
可 以 使 用 content 属性 为 元 素 添加 内 容 ， 通 过 该 属性 可 以 替代 JavaScript 的 部 分 功能 。content 属 
性 与 :before 及 :after 伪 元 素 配 合 使 用 ， 可 以 将 生成 的 内 容 放 在 一 个 元 素 内 容 的 前 面 或 后 面 。 
content 属性 的 语法 格式 如 下 。 


content: none | normal | <string> | counter(<counter>) | attr(<attribute>) 


url(<url>) | inherit; 


content 属性 的 各 属性 值 介绍 如 表 12-21 所 示 。 
表 12-21 content 属性 值 说 明 


性 值 | 说 明 

Wone 如 果 有 指定 的 添加 内 容 ， 则 设置 为 空 

[OSI 默认 值 ， 表 示 不 赋予 内 容 

该 属 性 信用 于 研 予 指定 的 文本 内 容 

[CGIGTECOURISIS 该 属性 值 用 于 指定 一 个 计数 器 作为 添加 内 容 

IEAESHTIUUIE 四 把 选择 的 元 素 的 属性 值 作为 添加 内 容 ，<attribute> 为 元 素 的 属性 
人 指定 一 个 外 部 资源 ( 图 像 、 声 音 、 视 频 或 浏览 器 支持 的 其 他 任何 资源 ) 作为 添加 内 容 ， 
<url> 为 一 个 网 络 地址 


[men 该 属性 信 表 示 继 承 父 元 素 


为 网 页 元 素 赋予 内 容 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 12 章 \12-5-4.html ”视频 : 光盘 \ 视 频 \ 第 12 章 \12-5-4.mp4 


I 执行 “文件 > 打开 ”命令 ,打开 页 面 “ 光 盘 \ 源 文件 \ 第 12 章 \12-5-4.html”， 效 果 如 
12-80 所 示 。 将 光标 移 至 名 为 ttle 的 Div 中 ， 将 多 余 的 文字 删除 ， 转 换 到 该 网 页 所 链接 的 外 部 
CSS 样式 表 文 件 中 ， 创 建 名 为 #itle before 的 CSS 样式 ， 如 图 12-81 所 示 。 






289 回 








#title:before { 
content: "关于 小 能 乐园 " 











|} 


图 12-80 图 12-81 





国运 回 设计 视图 中 ， 可 以 看 到 名 为 title 的 Div 中 没有 任何 内 容 ， 如 图 12-82 所 示 。 保存 页 面 ， 
并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 通过 content 属性 为 id 名 为 title 的 Div 
赋予 文字 内 容 的 效果 ， 如 图 12-83 所 示 。 





图 12-82 图 12-83 


可 以 使 用 content 属性 为 网 页 中 的 容器 赋予 相应 的 内 容 ， 但 是 content 属性 必 
须 与 :after 或 者 :before 伪 类 元 素 结合 使 用 。 





12.6 





网 页 设计 者 如 果 要 设计 多 列 布局 ， 有 两 种 方法 ， 一 种 是 浮动 布局 ， 另 一 种 是 定位 布局 。 浮 动 布局 
比较 灵活 ， 但 容易 发 生 错位 ， 需 要 添加 大 量 的 附加 代码 或 无 用 的 换行 符 ， 增 加 了 不 必要 的 工作 量 。 定 
位 布局 可 以 精确 地 确定 位 置 ， 不 会 发 生 错位 ， 但 是 无 法 满足 模块 的 适应 能 力 。 在 CSS 3 中 新 增 了 多 
列 布局 相关 属性 ， 可 以 从 多 个 方面 去 设置 : 多 列 的 列 数 、 每 列 的 宽度 、 列 与 列 之 间 的 距离 、 列 与 列 之 
间 的 分 隔 线 、 跨 多 列 设置 等 ， 本 节 将 详细 进行 介绍 。 
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CSS 3 新 增 了 columns 属性 ， 该 属性 用 于 快速 定义 多 列 布局 的 列 数目 和 每 列 的 宽度 。 基 于 
webkit 内 核 的 替代 私有 属性 是 -webkit-columns，gecko 内 核 的 浏览 器 暂 不 支持 。 
columns 属性 的 语法 格式 如 下 。 


columns: <column-width> || <column-count>; 


columns 属性 的 属性 值 介绍 如 表 12-22 所 示 。 
表 12-22 columns 属性 值 说 明 


局 性 值 | 说 。 明 
<column=width> | 该 属性 值 用 于 设置 每 列 的 宽度 
[ConscoUnt> | 该 属性 值 用 于 设置 多 列 的 列 数 


在 实际 布局 的 时 候 ， 所 定义 的 多 列 的 列 数 是 最 大 列 数 。 当 外 围 宽度 不 足 时 ， 多 列 的 列 数 会 适当 减 
少 ， 而 每 列 的 宽度 会 自 适应 宽度 ， 填 满 整个 范围 区 域 。 


快速 将 网 页 内 容 分 为 多 列 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 12 章 \12-6-1.html 。 视频 : 光盘 \ 视 频 \ 第 12 章 \12-6-1.mp4 


[ES 执行 “文件 > 打开 ”命令 ,打开 页 面 “光盘 \ 源 文件 \ 第 12 章 \12-6-1.html”， 效 果 如 
12-84 所 示 。 在 浏览 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 默认 显示 效果 ， 如 图 12-85 所 示 。 
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图 12-84 图 12-85 


到 王 。 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 ， 找 到 名 为 #main 的 CSS 样式 设置 代码 ， 
添加 columns 属性 设置 代码 ， 如 图 12-86 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 
中 预览 页 面 ， 可 以 看 到 页 面 元 素 被 分 为 3 列 的 显示 效果 ， 如 图 12-87 所 示 。 
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#main { 
background-color: #F7F6F6; 
padding: 26px; 
columns: 266px_3; /* 设 计 





盯 














图 12-86 


如 果 该 页 面 元 素 采用 百分比 设置 的 宽度 ， 当 缩小 浏览 器 窗口 时 ， 则 文章 将 变 成 2 
列 或 者 1 列 ， 每 列 的 高 度 尽 可 能 保持 一 致 ， 而 每 列 的 宽 色 会 自 适应 分 配 ， 不 一 定 是 
200 像素 。 





CSS 3 新 增 column-width 属性 ， 该 属性 可 以 定义 多 列 布局 中 每 列 的 宽度 ， 可 以 单独 使 用 ， 也 
可 以 和 其 他 多 列 布局 属性 组 合 使 用 。 基 于 webkit 内 核 的 替代 私有 属性 是 -webkit-column-width， 
基于 gecko 内 核 的 替代 私有 属性 是 -moz-column-width。 

column-width 属性 的 语法 格式 如 下 。 


column-width: auto | <length>; 


column-width 的 相关 属性 值 说 明 如 表 12-23 所 示 。 


表 12-23 column-width 属性 值 说 明 
说 明 








| 

ISO 该 属性 值 表示 列 的 完 度 由 浏览 器 决定 
Ee 该 值 是 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 以 
为 负 值 


CSS 3 新 增 了 column-count 属性 ， 该 属性 可 以 设置 多 列 布局 的 列 数 ， 而 不 需要 通过 列 宽度 自 
动 调整 列 数 。 基 于 webkit 内 核 的 替代 私有 属性 是 -webkit-column-count， 基 于 gecko 内 核 的 蔡 
代 私 有 属性 是 -moz-column-count。 

column-count 属性 的 语法 格式 如 下 。 


column-count: auto | <number>; 
column-count 的 相关 属性 值 说 明 如 表 12-24 所 示 。 
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表 12-24 column-count 属性 值 说 明 
说 明 
[SUGAR 该 尾 性 值 表 示 列 的 数目 由 其 他 属性 决定 如 column-width 
[AU 该 属性 值 用 于 指定 列 的 数目 ， 取 值 为 大 于 0 的 整数 ， 决 定 了 多 列 的 最 大 列 数 


CSS 3 新 增 了 column-gap 属性 ， 通 过 该 属性 可 以 设置 列 与 列 之 间 的 距离 ， 从 而 可 以 更 好 地 
控制 多 列 布局 中 的 内 容 和 版 式 。 基 于 webkit 内 核 的 替代 私有 属性 是 -webkit-column-gap， 基 于 
gecko 内 核 的 替代 私有 属性 是 -moz-column-gap。 

column-gap 属性 的 语法 格式 如 下 。 


column-gap: normal | <length>; 


column-gap 的 相关 属性 值 说明 如 表 12-25 所 示 。 
表 12-25 column-gap 属性 值 说 明 


性 值 | 说 ” 明 
[ma 该 属性 值 为 默认 值 显示 浏览 器 默认 的 列 间距 ， 一 般 为 lem 
区 SONS 该 属性 值 用 于 指定 列 与 列 之 间 的 距离 ， 由 浮 点 数字 和 单位 标识 符 组 成 ， 不 可 以 为 负 值 


column-gap 属性 不 能 单独 设置 ， 只 有 通过 column-width 或 column-count 属性 为 元 素 进行 
分 栏 后 ， 才 可 以 使 用 column-gap 属性 设置 列 间距 。 


边框 是 非常 重要 的 CSS 属性 之 一 ， 通 过 边框 可 以 划分 不 同 的 区 域 。CSS 3 新 增 了 column- 
rule 属性 ， 在 多 列 布局 中 ， 通 过 该 属性 设置 多 列 布局 的 边框 ， 用 于 区 分 不 同 的 列 。 基 于 webkit 内 核 
的 替代 私有 属性 是 -webkit-column-rule, 基于 gecko 内 核 的 替代 私有 属性 是 -moz-column-rule。 
column-rule 属性 的 语法 格式 如 下 。 


column-rule: [column-rule-width] || [column-rule-style] || [column-rule-color]; 


column-rule 属性 的 相关 属性 值 说 明 如 表 12-26 所 示 。 
表 12-26 column-rule 属性 值 说 明 


属性 值 说 明 

e010mn=7uie=Wid 太 | 该 属性 值 用 于 设置 分 隔 线 的 宽度 ， 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 以 为 负 值 
[CGIUmnsrUlesstyiS> | 该 属性 值 用 于 设置 分 隔 线 的 样式 

eam 于 E556 二 | 该 属性 信用 于 设置 分 隔 线 的 颜色 


column-rule 属性 及 其 子 属性 的 使 用 方法 与 border 属性 及 其 子 属性 的 相同 。 对 
于 webkit 内 核 的 浏览 器 , column-rule 属性 及 其 子 属性 前 需要 增加 前 缀 “-webkit- 
对 于 gecko 内 核 的 浏览 器 , column-rule 属性 及 其 子 属性 前 需要 增加 前 缀 “-moz-” 
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CSS 3 新 增 了 column-span 属性 ， 在 多 列 布局 中 ， 该 属性 用 于 定义 元 素 跨 列 显示 。 基 于 
webkit 内 核 的 替代 私有 属性 是 -webkit-column-span，gecko 内 核 的 浏览 器 暂 不 支持 该 属性 。 
column-span 属性 的 语法 格式 如 下 。 


column-span: 1 | all; 


column-span 属性 的 相关 属性 值 说 明 如 表 12-27 所 示 。 
表 12-27 column-span 属性 值 说 明 


| 说 。 用 


UL LU 该 属性 值 为 默认 值 ， 表 示 元 素 在 一 列 中 显示 
SU 该 属性 值 表 示 元 素 横路 所 有 列 显示 






实现 网 页 内 容 的 分 栏 显 示 效 果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 12 章 \12-6-6.html 。 视频 : 光盘 \ 视 频 \ 第 12 章 \12-6-6.mp4 


[ES 执行 “文件 > 打开 ”命令 , 打开 页 面 “光盘 \ 源 文件 \ 第 12 章 \12-6-6.html”, 效果 如 图 12-88 所 示 。 
转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 #main 的 CSS 样式 ， 如 图 12-89 所 示 。 


i 四 





#main { 
background-color: #F7F6F6; 
padding: 29px; 














图 12-88 图 12-89 


本 本 ”在 该 CSS 样式 中 添加 列 宽度 column-width 属性 设置 代码 ， 如 图 12-90 所 示 。 保 存 页 面 ， 
并 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 网 页 元 素 被 分 为 多 栏 ， 并 且 第 一 栏 的 
宽度 为 100 像素 ， 效 果 如 图 12-91 所 示 。 





#main 工 
background-color: #F7F6F6; 
padding: 20px; 
column-width: 100px; 











图 12-90 图 12-91 
葬 畏 ”返回 外 部 CSS 样式 表 文件 中 ， 在 名 为 #main 的 CSS 样式 中 ， 将 刚 添加 的 column-width 
@@294 





属性 设置 删除 ， 添 加 定义 栏目 列 数 column-count 属性 设置 代码 ， 如 图 12-92 所 示 。 保 存 页 面 ， 并 
保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ,可 以 看 到 网 页 元 素 被 分 为 3 栏 , 如 图 12-93 所 示 。 





#main { 
background-color: #F7F6F6; 
padding: 20px; 
column-count: 3; 











} 





图 12-92 图 12-93 


[gm 返回 外 部 CSS 样式 表 文件 中 ， 在 名 为 #main 的 CSS 样式 中 添加 列 间距 column-gap 属性 
设置 代码 ， 如 图 12-94 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 
以 看 到 所 设置 的 列 间距 效果 ， 如 图 12-95 所 示 。 





#main { 
background-color: #F7F6F6; 
padding: 26px; 
column-count: 3; 
column-gap: 20px; 














图 12-94 图 12-95 


国 轩 ”返回 外 部 CSS 样式 表 文件 中 ， 在 名 为 #main 的 CSS 样式 中 添加 列 分 隔 线 column-rule 属 
性 设置 代码 ， 如 图 12-96 所 示 。 保 存 页 面 ， 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 
可 以 看 到 所 设置 的 列 分 隔 线 效果 ， 如 图 12-97 所 示 。 





#main 工 
background-color: #F7F6F6; 
padding: 20px; 
column-count: 3; 
column-gap: 20px; 


column-rule: dashed lpx #999; 
} 一 


图 12-96 图 12-97 
国 畏 ”返回 外 部 CSS 样式 表 文 件 中 ， 找 到 名 为 .font01 的 类 CSS 样式 ， 在 该 CSS 样式 中 添加 横 
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跨 所 有 列 column-span 属性 设置 代码 , 如 图 12-98 所 示 。 保存 页 面 ， 并 保存 外 部 CSS 样式 表 文 件 ， 
在 浏览 器 中 预览 页 面 ， 可 以 看 到 文章 标题 横 跨 所 有 列 的 效果 ， 如 图 12-99 所 示 。 


.fontel { 
font-size: 16px; 
font-weight: bold; 
background-color: #F9F9F9; 
border: solid lpx #FFF; 
color: #069; 
line-height: 35px; 
text-align: center; 
display: block; 
margin-bottom: 15px; 
column-span: all; 

















图 12-98 


本 章 主 要 介绍 了 CSS 盒 模型 和 界面 设计 内 容 的 相关 知识 ， 通 过 本 章 的 学 习 能 够 使 读者 了 解 CSS 
盒 模型 和 新 增 的 CSS 3 功能 属性 ， 不 可 否认 这 些 功 能 的 确 强大 ， 一 个 网 页 布局 的 好 坏 ， 直 接 影响 到 
网 页 加 载 的 速度 。 完 成 本 章 内 容 的 学 习 ， 希 望 读 者 能 够 掌握 这 些 相关 知 识 ， 并 对 网 页 有 进一步 的 认识 
和 了 解 。 
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一 A 

EW 本 章 知识 点 

第 13 章 CSS 3 动画 效果 Vv 汪汪 本 gh 
属性 


学 运 transform 属性 各 变换 
CSS 3 为 设计 师 带 来 了 革命 性 的 改变 ， 不 但 可 以 实现 元 素 的 变形 人 
操作 ， 还 能 够 在 网 页 中 实现 动画 效果 。 本 章 将 带领 读者 详细 学 习 | 。 国人 de 


a i 一 Origin 的 设置 方法 
CSS 3 中 新 增 的 2D 和 3D 变形 动画 属性 ， 从 而 掌握 通过 CSS 掌握 元 素 过 渡 效果 transition 


样式 实现 动画 的 方法 。 属性 的 设置 和 使 用 方法 
WY 理解 实现 网 页 动画 的 @ 


keyframes 规则 和 animation 




















在 网 页 中 如 果 需 要 使 一 些 元 素 产生 倾斜 等 变换 效果 , 则 需要 通过 将 图 像 制作 成 倾斜 的 效果 来 实现 ， 
而 在 CSS 3 中 ， 新 增 了 transform 属性 ， 通 过 该 属性 的 设置 可 以 使 网 页 中 的 元 素 产 生 各 种 变换 效果 。 


CSS 3 新 增 的 transform 属性 可 以 在 网 页 中 实现 元 素 的 旋转 、 缩 放 、 移 动 、 倾 斜 等 变换 效果 。 
transform 属性 的 语法 如 下 。 























transform: none | <transform-function>; 











transform 属性 的 属性 值 说 明 如 表 13-1 所 示 。 
表 13-1 transform dian 


两 下 内 认 值 ， 不 设置 元 素 变换 效果 


设置 一 个 或 多 个 变形 函数 。 变 形 函 数 包括 旋转 rotate()、 缩 放 scale()、 移 动 
translate()、 倾 斜 skew()、 和 矩阵 变形 matrix() 等 。 设 置 多 个 变形 函数 时 ， 使 用 空 
格 进行 分 隔 











基于 webkit 内 核 的 替代 私有 属性 是 -webkit-transform; 基于 gecko 内 核 的 替代 私有 属性 
是 -moz-transform; 基于 presto 内 核 的 蔡 代 私 有 属性 是 -o-transform; IE 浏览 器 的 替代 私有 属 
性 是 -ms-transform。 





提示 元 素 在 变换 过 程 中 ， 仅 元 素 的 显示 效果 变换 ， 实 际 尺寸 并 不 会 因为 变换 而 改变 。 
所 以 元 素 变换 后 , 可 能 会 超出 原 有 的 限定 边界 , 但 不 会 影响 自身 尺寸 及 其 他 元 素 的 布局 。 


设置 transform 属性 值 为 rotate() 函数 ， 即 可 实现 网 页 元 素 的 旋转 变换 。rotate() 函数 用 于 定义 
网 页 元 素 在 二 维 空间 中 的 旋转 变换 效果 。rotate() 函数 的 语法 如 下 。 


transform: rotate (<angle>); 


<angle> 参数 表示 元 素 旋 转角 度 , 为 带 有 角度 单位 标识 符 的 数值 , 角度 单位 是 deg。 该 值 为 正 数 时 ， 
表示 顺 时 针 旋 转 ， 该 值 为 负数 时 ， 表 示 逆 时 针 旋转 。 


实现 网 页 元 素 的 缩放 和 翻转 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 13 章 \13-1-2.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-1-2.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-1-2.html”， 页 面 效果 如 图 13-1 所 示 。 转 换 到 代 
码 视图 中 ， 可 以 看 到 该 网 页 的 HTML 代码 ， 如 图 13-2 所 示 。 








<body> 
<div id="box"><img src= a .png" width= 
"590" height=" "2358 slt=" 

勇 到 者 的 地 定 冒 险 <br> 


els 





"> <ing srcs ee png" width="336" 
height="1891" att=""/></a>< 


0 By ow ee </body> 











图 13-1 图 13-2 


国 E。 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 #box a:hover 的 CSS 样式 ， 如 
13-3 所 示 。 保 存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 13-4 所 示 。 





#box a:hover { 
transform: rotate(-1l5deg); 
-webkit-transform: rotate(-15deg) ; 
-moz-transform: rotate(-15deg); 
-o-transform: rotate(-l5deg); 
-ms-transform: rotate(-l5deg); 














图 13-3 
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[ 国 缠 ” 当 光 标 移 至 设置 了 超 链接 的 按钮 图 像 上 时 ， 可 以 看 到 按钮 图 像 产生 了 旋转 ， 如 图 13-5 所 示 。 








图 13-5 


在 id 名 称 为 box 的 网 页 元 素 的 鼠标 经 过 状态 中 ， 设 置 transform 属性 值 为 缩 
放 变形 函数 scale()， 缩 放 值 为 1.5， 实 现 当 鼠 标 经 过 该 超 链接 元 素 时 ， 元 素 放 大 
至 1.5 倍 。 





设置 transform 属性 值 为 scale() 函数 ， 即 可 实现 网 页 元 素 的 缩放 和 翻转 效果 。scale() 函数 用 
于 定义 网 页 元 素 在 二 维 空间 的 缩放 和 翻转 效果 。scale() 函数 的 语法 如 下 。 


transform: Scale (<x>, <y>); 


scale() 函数 的 参数 说 明 如 表 13-2 所 示 。 
表 13-2 scale() 函数 的 参数 说 明 


2 | 
= 表示 元 素 在 水 平方 向 上 的 缩放 倍数 
<y> | 表示 元 素 在 垂直 方向 上 的 缩放 倍数 





<x> 和 <y> 参数 的 值 可 以 为 整数 、 负 数 和 小 数 。 当 取 值 的 绝对 值 大 于 1 时 ， 表 示 放 大 ; 绝对 值 
小 于 1 时 ， 表 示 缩 小 ; 当 取 值 为 负数 时 ， 元 素 会 被 翻转 。 如 果 <y> 参数 值 省 略 ， 则 说 明 垂 直方 向 上 
的 缩放 倍数 与 水 平方 向 上 的 缩放 倍数 相同 。 


实现 网 页 元 素 的 缩放 和 翻转 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 13 章 \13-1-3.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-1-3.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-1-3.html”， 页 面 效 果 如 图 13-6 所 示 。 转 换 到 代 
码 视图 中 ， 可 以 看 到 该 网 页 的 HTML 代码 ， 如 图 13-7 所 示 。 
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<body> 
<div id="box"><img src= 所 png" width= 
nm598" height="235" att="n/>< 

勇敢 者 的 地 牢 冒 险 <br> 

<br> 


一 <a href="#"><img src="images/131263.png”" width="330" 
Play Now height="101” alt=""/></a></div> 
</body> 











图 13-6 图 13-7 


到 王 。 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 .pic01 的 类 CSS 样式 ， 如 图 13-8 
所 示 。 返回 设计 视图 , 选中 页 面 中 相应 的 图 像 , 为 该 图 像 应 用 名 为 pic01 的 类 CSS 样式 , 如 图 13-9 所 示 。 














.picel { 
transform: scale(-0.8); 
-webkit-transform: scale(-0.8); 
-moz-transform: scale(-0.8); 
-o-transform: scale(-0.8); 
-ms-transform: scale(-0.8); 











图 13-8 图 13-9 


国 5。 保存 页 面 并 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 应 用 该 类 CSS 样 
式 的 图 片 实现 了 缩小 并 翻转 效果 ， 如 图 13-10 所 示 。 返 回 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 #box 
a:hover 的 CSS 样式 ， 如 图 13-11 所 示 。 








#box a:hover { 
transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-moz-transform: scale(1.5); 
-o-transform: scale(1.5); 
CLT -ms-transform: scale(1.5); 














图 13-10 图 13-11 


在 id 名 称 为 box 的 网 页 元 素 的 鼠标 经 过 状态 中 ， 设 置 transform 属性 值 为 
缩放 变形 函数 scale()， 缩 放 值 为 1.5， 实 现 当 鼠标 经 过 该 超 链接 元 素 时 ， 元 素 放 
大 至 中 5 信 





区 保存 页 面 并 保存 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 13-12 所 示 。 当 光标 移 
至 设置 了 超 链接 的 按钮 图 像 上 时 ， 可 以 看 到 按钮 图 像 产生 放大 效果 ， 如 图 13-13 所 示 。 





@@aso0 


[el ee 


PlayJNow 


Play Now i 





设置 transform 属性 值 为 translate() 函数 ， 即 可 实现 网 页 元 素 的 移动 。translate() 函数 用 于 定 
义 网 页 元 素 在 二 维 空间 的 偏 移 效果 。translate() 函数 的 语法 如 下 。 


transform: translate (<x>, <y>); 


translate() 函数 的 参数 说 明 如 表 13-3 所 示 。 
表 13-3 translate() 函数 的 参数 说 明 


EL 说 有 | 


<x> 表示 网 页 元 素 在 水 平方 向 上 的 偏 移 距离 
<y> 表示 网 页 元 素 在 垂直 方向 上 的 偏 移 距离 


<x> 和 <y> 参数 的 值 是 带 有 长 度 单位 标识 符 的 数值 ， 可 以 为 负数 和 带 有 小 数 的 值 。 如 果 取 值 大 
于 0， 表 示 元 素 向 右 或 向 下 偏 移 ， 如 果 取 值 小 于 0， 则 表示 元 素 向 左 或 向 上 偏 移 。 如 果 <y> 值 省 略 ， 
则 说 明 垂直 方向 上 偏 移 距离 默认 为 0。 


实现 网 页 元 素 的 移动 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 13 章 \13-1-4.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-1-4.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-1-4.html”， 页 面 效 果 如 图 13-14 所 示 。 转 换 到 
代码 视图 中 ， 可 以 看 到 该 网 页 的 HTML 代码 ， 如 图 13-15 所 示 。 
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es/131262.png" width= 
/><br> 


31263.png" width= 
div> 


idth="210" height="69" 











图 13-14 图 13-15 
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[到 国 ”转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 #help a:hover 的 CSS 样式， 
如 图 13-16 所 示 。 





#help a:hover { 
transform: translate(-130px); 标准 写法 
-webkit-transform: translate(-130px); 
-moz-transform: translate(-130px); * 怀 : 住 geckof 怪 与 ;去 
-o-transform: translate(-130px); nd:: : 
-ms-transform: translate(-130px); 











图 13-16 


在 id 名 称 为 box 的 网 页 元 素 的 鼠标 经 过 状态 中 ， 设 置 transform 属性 值 为 移动 
园 变形 函数 translate()， 仅 设置 了 一 个 负 值 参数 ， 表 示 元 素 在 水 平方 向 上 向 左 偏 移 ， 
垂直 方向 上 没有 设置 参数 ， 则 默认 为 0， 即 不 在 垂直 方向 上 发 生 偏 移 。 





[@E 王 ”保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 13-17 所 示 。 当 光标 移 至 页 面 
右上 角 设 置 了 超 链接 的 图 像 上 时 ， 可 以 看 到 该 图 像 产生 水 平 向 左 移动 的 效果 ， 如 图 13-18 所 示 。 
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图 13-17 图 13-18 








设置 transform 属性 值 为 skew() 函数 ， 即 可 实现 网 页 元 素 的 倾斜 效果 。skew() 函数 用 于 定义 
网 页 元 素 在 二 维 空间 中 的 倾斜 变换 。skew() 函数 的 语法 如 下 。 


transform: skew (<angleX>, <angleY>); 


Skew() 函数 的 参数 说 明 如 表 13-4 所 示 。 
表 13-4 skew() 函数 的 参数 说 明 


全 ES 下 于 说 。 明 
<angieXx> 下 是 表示 网 页 元 素 在 空间 x 轴 上 的 倾斜 角度 
表示 网 页 元 素 在 空间 y 轴 上 的 倾斜 角度 





<angleX> 和 <angleY> 参数 的 值 是 带 有 角度 单位 标识 符 的 数值 ， 角 度 单位 是 deg 。 取 值 为 正 数 
时 ， 表 示 顺 时 针 旋转 ; 取 值 为 负数 时 ， 表 示 逆 时 针 旋 转 。 如 果 <angleY> 参数 值 省 略 ， 则 说 明 垂直 方 
向 上 的 倾斜 角度 默认 为 0deg 。 


实现 网 页 元 素 的 倾斜 效果 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 13 章 \13-1-5.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-1-5.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-1-5.html”， 页 面 效 果 如 图 13-19 所 示 。 转 换 到 
代码 视图 中 ， 可 以 看 到 该 网 页 的 HTML 代码 ， 如 图 13-20 所 示 。 


CT DE 击 两 以， 短 FREERRE 外 








<body> 
<div id="box"> 

<div id="left"></div> 
</div> 
<div id="btn">ROBERT<br> 
JACKSON-MEE</div> 
</body> 











图 13-19 图 13-20 


加 本 纹 。 转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 #tn:hover 的 CSS 样式 ， 如 图 13-21 
所 示 。 





#btn:hover { 
cursor: pointer; 
transform: skew(-30deg); 
-webkit-transform: skew(-30deg); 
-moz-transform: skew(-30deg); 
-o-transform: skew(-30deg); 
-ms-transform: skew(-30deg); 











} 
图 13-21 
二 在 id 名 称 为 btn 的 网 页 元 素 的 鼠标 经 过 状态 中 ， 设 置 transform 属性 值 为 倾斜 
变形 函数 skew()， 仅 设置 了 水 平方 向 倾斜 角度 为 30deg， 没 有 设置 垂直 方向 上 的 倾 
斜 角度 ， 则 默认 垂直 方向 上 的 倾斜 角度 为 0deg。 


国 蜀 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 13-22 所 示 。 当 光标 移 至 页 面 
中 相应 的 元 素 上 方 时 ， 可 以 看 到 该 元 素 产生 的 倾斜 效果 ， 如 图 13-23 所 示 。 
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图 13-22 图 13-23 





设置 transform 属性 值 为 matrix() 函数 ， 即 可 实现 网 页 元 素 的 矩阵 变形 。matrix() 函数 用 于 定 
义 网 页 元 素 在 二 维 空间 的 矩阵 变形 效果 。matrix() 函数 的 语法 如 下 。 


transform: matrix(<mll1>,<ml2>, <m21>, <m22>, <x>, <y>); 


matrix() 函数 中 的 6 个 参数 均 为 可 计算 的 数值 ， 组 成 一 个 变形 和 矩阵， 与 当前 网 页 元 素 旧 的 参数 组 
成 的 矩阵 进行 乘法 运算 ， 形 成 新 的 矩阵， 元 素 的 参数 被 改变 。 该 变形 矩阵 的 形式 如 下 。 


攻 | 
| ml2 m22 yl| 


10 0 1 


关于 详细 的 矩阵 变形 原理 ， 需 要 掌握 矩阵 的 相关 知识 ， 具 体 可 以 参考 数学 及 图 形 学 相关 的 资料 ， 
这 里 不 做 过 多 的 说 明 。 不 过 这 里 可 以 先 通过 几 个 特例 了 解 其 大 概 的 使 用 方法 。 前 面 已 经 讲解 了 移动 、 
缩放 和 旋转 这 些 变 换 操作 ， 其 实 都 可 以 看 作 是 矩阵 变形 的 特例 。 

e 旋转 rotate(A): 相当 于 和 矩阵 变形 matrix(cosA,sinA,-sinA,cosA,0,0)。 

e 缩放 scale(sx,sy): 相当 于 和 矩阵 变形 matrix(Sx,0,0,sy,0,0)。 

e 移动 translate(dx,dy): 相当 于 矩阵 变形 translate(1,0,0,1,dx,dy)。 

可 见 ， 通 过 矩形 变形 可 以 使 网 页 元 素 的 变形 更 加 灵活 。 


实战 实现 网 页 元 素 的 矩阵 变形 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 13 章 \13-1-6.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-1-6.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-1-6.html”， 页 面 效 果 如 图 13-24 所 示 。 转 换 到 
代码 视图 中 ， 可 以 看 到 该 网 页 的 HTML 代码 ， 如 图 13-25 所 示 。 
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<body> 
<div id="box"> 

<div id="left"></div> 
</div> 
<div id="btn">ROBERT<br> 
JACKSON-MEE</div> 
</body> 














图 13-24 图 13-25 


节 责 ”转换 到 该 网 页 所 链接 的 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 #btn:hover 的 CSS 样式 ， 如 图 
13-26 所 示 。 








#btn:hover { 
cursor: pointer; 
transform: matrix(0.86,0.5,0.5,-0.86,10,10); 
-webkit-transform: matrix(0.86,0.5,0.5,-0.86,10,10); 
-moz-transform: matrix(0.86,0.5,0.5,-0.86,10,10); 
-0-transform: matrix(0.86,0.5,0.5,-0.86,10,10); 
-ms-transform: matrix(0.45,0.8,0.8,-0.45,20,20); 











图 13-26 


[gg 一 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 13-27 所 示 。 当 光标 移 至 页 面 
中 相应 的 元 素 上 方 时 ， 可 以 看 到 该 元 素 产 生 的 矩阵 变形 效果 ， 如 图 13-28 所 示 。 


























transform 属性 可 以 实现 对 网 页 元 素 的 变换 ， 默 认 的 变换 原点 是 元 素 对 象 的 中 心 点 。 在 CSS 3 中 新 
增 了 transform-origin 属性 ， 通 过 该 属性 可 以 设置 元 素 变换 的 中 心 点 位 置 ， 这 个 位 置 可 以 是 元 素 对 象 
的 中 心 点 以 外 的 任意 位 置 ， 这 样 就 使 得 使 用 transform 属性 对 网 页 元 素 进行 变换 操作 时 更 加 灵活 。 
transform-origin 属性 的 语法 如 下 。 
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transform-origin: <x-axis> <y-axis>; 


transform-origin 属性 的 属性 值 说 明 如 表 13-5 所 示 。 
表 13-5 transform-origin 属性 值 说 明 


属性 值 | 说 明 

ES 册 届 定义 变形 原点 的 横 坐 标 位 置 ， 默 认 值 为 50%， 取 值 包括 let、center、right、 百 分 比值 、 长 度 什 
定义 变形 原点 的 纵 坐 标 位 置 ， 默 认 值 为 50%， 取 值 包括 top、middle、bottom、 百 分 比值 、 
长 度 什 


基于 webkit 内 核 的 替代 私有 属性 是 -webkit-transform-origin; 基于 gecko 内 核 的 替代 私有 
属性 是 -moz-transform-origin; 基于 presto 内 核 的 蔡 代 私有 属性 是 -o-transform-origin; IE 
浏览 器 的 替代 私有 属性 是 -ms-transform-origin 。 


设置 网 页 元 素 的 变形 中 心 点 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 13 章 \13-1-7.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-1-7.mp4 


WI 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-1-7.html”， 页 面 效 果 如 图 13-29 所 示 。 转 换 到 





#pic { 
position: absolute; 
width: 419px; 
height: 700px; 
right: Opx; 
top: Qpx; 


Classic Brown Leather 














图 13-29 图 13-30 


葬 % 在 该 CSS 样式 代码 中 添加 transform 属性 设置 ， 对 该 网 页 元 素 进行 旋转 操作 ， 如 图 13-31 
所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 网 页 元 素 旋转 的 效果 ， 
默认 情况 下 ， 以 元 素 的 中 心 点 位 置 进行 旋转 ， 效 果 如 图 13-32 所 示 。 





#pic { 
position: absolute; 
width: 419px; 
height: 760px; 
right: Opx; 
top: Opx; 
transform: rotate(30deg); 
-webkit-transform: rotate(30deg);| 
-moz-transform: rotate(30deg); 


-o-transform: rotate(30deg); 
-ms-transform: rotate(30deg); 

















图 13-31 图 13-32 
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王国 返回 到 外 部 CSS 样式 表 中 ， 在 名 为 #pic 的 CSS 样式 中 添加 transform-origin 属性 设置 ， 
如 图 13-33 所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 设置 变 
换 中 心 点 后 元 素 旋转 变形 的 效果 ， 如 图 13-34 所 示 。 





#pic { 
position: absolute; 
width: 419px; 
height: 7eepx; 
right: Opx; 
top: Opx; 
transform: rotate(36deg) ; 
-webkit-transform: rotate(36deg); 


-moz-transform: rotate(30deg); Classic Brown Leather 
-o-transform: rotate(36deg); 
-ms-transform: rotate(30deg); 
transform-origin: 6% 6%; 
-webkit-transform-origin: 0% 6%; 


-moz-transform-origin: ©% g%; 
-0-transform-origin: 6% 0%; 
-ms-transform-origin: 6% 6%; 














图 13-33 图 13-34 


设置 transform 属性 值 为 移动 translate() 函数 、 旋 转 rotate() 函数 和 缩放 


scale() 函数 ， 各 函数 之 间 以 空格 进行 分 隔 ， 在 执行 CSS 样式 代码 时 ， 按 顺序 对 该 
元 素 进行 多 个 变换 操作 。 








和 矩阵 变形 虽然 非常 灵活 ， 但 是 并 不 容易 理解 ， 也 不 是 很 直观 。transform 属性 允许 同时 设置 多 个 
变形 函数 ， 这 使 得 元 素 变形 更 加 灵活 。 在 为 transform 属性 设置 多 个 函数 时 ， 各 函数 之 间 使 用 空格 进 
行 分 隔 ， 表 现形 式 如 下 所 示 。 


transform: rotate (<angle>) scale(<x>,<y>) translate(<x>,<y>) 


Skew (<angleX>, <angleY>) matrix(<mll1>, <ml2>, <m21>, <m22>, <x>, <y>); 


为 网 页 元 素 同时 应 用 多 个 变形 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 13 章 \13-1-8.html ”视频 : 光盘 \ 视 频 \ 第 13 章 \13-1-8.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-1-8.html”， 页 面 效 果 如 图 13-35 所 示 。 转 换 到 
该 网 页 所 链接 的 外 部 样式 表 文 件 中 ， 找 到 名 为 #pic 的 CSS 样式 设置 代码 ， 如 图 13-36 所 示 。 
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#pic { 
position: absolute; 
width: 419px; 
height: 7600px; 
left: 9px; 
top: 9px; 


Classic Brown Leather 














图 13-35 图 13-36 


葬 3 在 该 CSS 样式 代码 中 添加 transform 属性 设置 ， 对 该 网 页 元 素 同 时 进行 移动 、 旋 转 和 缩放 
操作 ， 如 图 13-37 所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 
元 素 同时 应 用 多 种 变形 的 效果 ， 如 图 13-38 所 示 。 













spic 
position: absolute; 
width: 41l9px; 
height: 7eepx; 
left: epx; 
top: Opx; 
transform: translate(100px, Opx) rotate(-36deg) scale(o.8); 
-webkit-transform: translate(100px,6px) rotate(-36deg) scate(6.8) | 
-moz-transform: translate(106px,8px) rotate(-36deg) scale( 
-o-transform: transLate(166px,6px) rotate(-36deg) scate(6. 
-ms-transform: transtate(166px,9px) rotate(-36deg) scate(6.8); 
























图 13-37 图 13-38 


设置 transform 属性 值 为 移动 translate() 函数 、 旋 转 rotate() 函数 和 缩放 
加 | scale() 函数 ， 各 函数 之 间 以 空格 进行 分 隔 ， 在 执行 CSS 样式 代码 时 ， 按 顺序 对 该 
元 素 进行 多 个 变换 操作 。 
[王国 返回 外 部 CSS 样式 表 文件 中 ,对 刚刚 添加 的 transform 属 性 中 多 个 变形 函数 的 顺序 进行 调整 ， 
如 图 13-39 所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 表 文件 , 在 浏览 器 中 预览 页 面 , 可 以 看 到 元 素 的 效果 ， 
如 图 13-40 所 示 。 













#ptc { 

position: absolute; 

width: 419px; 

height: 7eepx; 
left: Opx; 
top: 6pxi 
transform: rotate(-36deg) translate(160px, 0px) scale(6.8); 
-webkit-transform: rotate(-3edeg) translate(196px,epx) scale(6.8); 
-moz-transform: rotate(-36deg) translate(108px,epx) scale(6.8); 
-o-transform: rotate(-36deg) transtate(166px,6px) scale(9.8); 
-ms-transform: rotate(-36deg) translate(160px,6px) scate(6.8); 



























图 13-39 图 13-40 
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当 为 元 素 同 时 应 用 多 个 变形 函数 进行 变形 操作 时 ， 其 执行 的 顺序 是 按照 排列 的 
先后 顺序 进行 的 ， 如 果 调整 了 函数 的 先后 顺序 ， 则 得 到 的 变形 效果 也 会 有 所 不 同 。 





在 上 一 节 中 所 介绍 的 transform 属性 所 实现 的 是 网 页 元 素 的 变换 效果 ， 仅 仅 呈 现 的 是 元 素 变换 的 
结果 。 在 CSS 3 中 还 新 增 了 transition 属性 ， 通 过 该 属性 可 以 设置 元 素 的 变换 过 渡 效 果 ， 可 以 让 元 
素 的 变换 过 程 看 起 来 更 加 平滑 。 


CSS 3 新 增 了 transition 属性 ， 通 过 该 属性 可 以 实现 网 页 元 素 变换 过 程 中 的 过 渡 效 果 ， 即 在 网 
页 中 实现 了 基本 的 动画 效果 。 与 实现 元 素 变换 的 transform 属性 一 起 使 用 ， 可 以 展现 出 网 页 元 素 的 变 
形 过 程 ， 丰 富 动画 的 效果 。 

transition 属性 的 语法 如 下 。 


transition: transition-property || transition-duration || transition-timing— 


function || transition-delay; 


transition 属性 是 一 个 复合 属性 ， 可 以 同时 定义 过 渡 效 果 所 需要 的 参数 信息 。 其 中 包含 4 个 方面 
的 信息 ， 就 是 4 个子 属性 : transition-property、transition-duration 、transition-timing-func- 
tion 和 transition-delay。 

transition 属性 所 包含 的 子 属性 说 明 如 表 13-6 所 示 。 


表 13-6 transition 子 属 性 说 明 


[SHOTEUGISYE | 用 于 设置 开始 过 流 的 延 有 时间 
基于 webkit 内 核 的 浏览 器 需要 在 属性 名 称 前 增加 前 级“-webkit-”， 基 于 gecko 内 核 的 浏览 


需要 在 属性 名 称 前 增加 前 缀 “-moz-”， 基 于 presto 内 核 的 浏览 器 需要 在 属性 名 称 前 增加 前 级 
0 一 ”， 以 使 用 各 种 内 核 的 私有 属性 。 


transition-property 属性 用 于 设置 元 素 的 动画 过 渡 效 果 ， 该 属性 的 语法 如 下 。 


transition-property: none | all | <property>; 


transition-property 属性 的 属性 值 说 明 如 表 13-7 所 示 。 
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表 13-7 transition-property 属性 值 说 明 
四 
aa 表示 没有 任何 CSS 属性 有 过 渡 效 果 
局 该 属性 值 为 默认 值 ， 表 示 所 有 的 CSS 属性 都 有 过 渡 效 果 
Rrepary3 指定 一 个 用 去 号 分 隔 的 多 个 属性 ， 针 对 指定 的 这 些 属性 有 过 渡 效 果 


实现 网 页 元 素 变形 过 渡 效果 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 13 章 \13-2-2.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-2-2.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-2-2.html”， 页 面 效果 如 图 13-41 所 示 。 转 换 到 
该 网 页 所 链接 的 外 部 样式 表 文件 中 ， 找 到 名 为 #0go 的 CSS 样式 设置 代码 ， 如 图 13-42 所 示 。 
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#logo { 
width: 313px; 
height: 313px; 
background-color: #E92269; 
text-align: center; 
margin: 9px auto; 
padding: 20px; 


目前 国内 品 大 的 夺回 针 
入 硕 “引信 美人 于 六 、 代 尽 吕 位 和 














图 13-41 图 13-42 


EE 本 在 该 CSS 样式 代码 中 添加 transition-property 属性 transition-duration 属性 设置 ， 设 置 
元 素 过 渡 效 果 和 过 渡 时 间 ， 如 图 13-43 所 示 。 创 建 名 为 #0go:hover 的 CSS 样式 ， 在 该 CSS 样 
式 中 设置 元 素 在 鼠标 经 过 状态 下 的 变形 效果 ， 如 图 13-44 所 示 。 


#1ogo + 
width: 313px; 
height: 313px; 
background-color: #E92269; 
text-align: center; 
margin: 9px auto; 
padding: 290px; 
transition-property: transform;/* 尖 恐慌 * #logo:hover { 
-moz-transition-property: -moz-transform; cursor: pointer; 
-webkit-transition-property: -webkit-transform; background-color: #FC6; 
-o-transition-property: -o-transform; transform: rotate(9edeg);/* 
transition-duration: 1sj;/* 讼 置 过 演 时 间 * 一 一 二 一 一 一 一 一 -一 一 
Sp -moz-transform: rotate(90deg); 
-moz-transition-duration: 1s; 
-webkit-transform: rotate(90deg); 


-webkit-transition-duration: 1s; 
-o-transition-duration: 1s; -or-transform: rotate(90deg); 





























图 13-43 图 13-44 


通过 transition-property 属性 指定 了 transform 属性 为 需要 显示 过 渡 效 果 的 属 
性 ， 所 以 在 元 素 变换 过 程 中 的 过 渡 效 果 只 有 元 素 变形 的 过 渡 ， 而 没有 背景 颜色 变化 
的 过 渡 。 





@310 


[国保 存 页 面 并 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 效 果 如 图 13-45 所 示 。 当 光 
标 移 至 页 面 中 的 logo 元 素 上 方 时 ， 可 以 看 到 该 元 素 的 旋转 过 渡 效果 ， 如 图 13-46 所 示 。 











目 和 国内 昌 大 的 委任 冯 针 
委 杂 “引领 半 人 潮流 、 代 号 呈 位 生 和 ”的 本 理 信 


目 而 国内 量 大 的 生性 久 
委 孙 -引信 站 闪 ， 信 位 生活 -的 近 写 理 全 


图 13-45 图 13-46 





transition-duration 属性 用 于 设置 动画 过 渡 过 程 中 需要 的 时 间 ， 该 属性 的 语法 如 下 。 


transition-duration: <time>; 


<time> 参数 用 于 指定 一 个 用 逗号 分 隔 的 多 个 时 间 值 ， 时 间 的 单位 可 以 是 s( 秒 ) 或 ms( 毫秒 )。 
默认 情况 下 为 0， 即 看 不 到 过 渡 效 果 ， 看 到 的 直接 是 变换 后 的 结果 。 
设置 网 页 元 素 变形 过 渡 时 间 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 13 章 \13-2-3.html ”视频 : 光盘 \ 视 频 \ 第 13 章 \13-2-3.mp4 


ES 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-2-3.html”， 页 面 效 果 如 图 13-47 所 示 。 转 换 到 
该 网 页 所 链接 的 外 部 样式 表 文 件 中 ， 找 到 名 为 州 ogo 的 CSS 样式 设置 代码 ， 如 图 13-48 所 示 。 
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EI 到 全 FEaeetitm 合 攻 width: 313px; 

本 height: 313px; 
background-color: #E92269; 
text-align: center; 
margin: Opx auto; 
padding: 26px; 
transition-property: transform;/* 式 现 过 沽 * 
-moz-transition-property: -moz-transform; 
-webkit-transition-property: -webkit-transform; 
-o-transition-property: -o-transform; 
transition-duration: 1s;/* 设 站 过 并 时 间 * 
-moz-transition-duration: 1s; 
-webkit-transition-duration: 1s; 
-o-transition-duration: 1s; 











| 了 








图 13-47 图 13-48 
[于 在 该 CSS 样式 代码 中 的 transition-property 属性 中 添加 背景 颜色 的 过 渡 效 果 并 修改 变形 过 渡 


时 间 为 3s， 如 图 13-49 所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 当 光标 
移 至 页 面 中 的 logo 元 素 上 方 时 , 可 以 看 到 元 素 变 形 过 渡 效 果 ，, 过 渡 持 续 时 间 为 3s, 如 图 13-50 所 示 。 
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slogo T 
width: 313px; 
height: 313px; 
background-color: #E92269; 
text-align: center; 
margin: Opx auto; 
padding: 26px; 
transition-property: background-cotoritransformil/" 立 现 过 
-ztransition-property: backeround-tolor, -noz-transform; 
-webkit-transition-property: background-color, -webkit-transform; 
-o-transition-property: background-color,-0-transform; 
transition-duration: 3s > 
noz-transition-duration 35; 
-webkit-transition-duration: 3s; 
-o-transition-duration: 3s; 


















图 13-49 图 13-50 


葬 畏 ”返回 外 部 CSS 样式 表 文件 中 ， 在 名 为 州 0go 的 CSS 样式 中 修改 两 种 过 渡 效果 分 别 为 不 同 
的 持续 时 间 ， 如 图 13-51 所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 当 
光标 移 至 页 面 中 的 logo 元 素 上 方 时 ， 可 以 看 到 元 素 两 种 属性 不 同 过 渡 持续 时 间 的 效果 ， 如 图 13-52 
所 示 。 


Wogo { 
width: 313px 
height: 313px; 
background-color: #E92269; 
text-align: center; 
margin: Opx auto; 
padding: 20px; 
transition-property: background-color,transform;/* 
-moz-transition-property: background-color,-moz-transform; 
-webkit-transition-property: background-color,-webkit-transform; 
-o-transition-property: background-color, -0-transform; 
transition-duration: 1s,3s;/* 
oz-transTtion-duration 1s,3s; 
-webkit-transition-duration: 1s,3s; 
-o-transition-duration: 1s,3s; 











图 13-51 图 13-52 


景 颜色 和 变形 属性 。 在 预览 过 程 中 可 以 发 现 ， 背 景 颜色 过 渡 效果 已 经 结束 了 ， 变 形 


通过 transition-duration 属性 设置 两 个 过 渡 持 续 时 间 1s 和 4s， 分 别 应 用 于 背 
| 的 过 渡 效 果 还 在 持续 ， 直 至 变形 的 过 渡 完 成 。 





transition-delay 属性 用 于 设置 动画 过 渡 的 延迟 时 间 ， 该 属性 的 语法 如 下 。 


transition-delay: <time>; 


<time> 参数 用 于 指定 一 个 用 逗号 分 隔 的 多 个 时 间 值 ， 时 间 的 单位 可 以 是 s( 秒 ) 或 ms( 毫秒 )。 
默认 情况 下 为 0， 即 没有 时 间 延 迟 ， 立 即 开始 过 渡 效果 。 
<time> 参数 的 取 值 可 以 为 负 值 , 但 过 渡 的 效果 会 从 该 时 间 点 开始 , 之 前 的 过 渡 效 果 将 会 被 截断 。 
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设置 网 页 元 素 变形 过 渡 延 迟 时 间 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 13 章 \13-2-4.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-2-4.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-2-4.html”， 页 面 效果 如 图 13-53 所 示 。 转 换 到 
该 网 页 所 链接 的 外 部 样式 表 文件 中 ， 找 到 名 为 #iogo 的 CSS 样式 设置 代码 ， 如 图 13-54 所 示 。 


91ogo 于 
width: 313px; 
height: 313px; 
background-color: #E92269; 
text-align: center; 
margin: Opx auto; 
padding: 28px; 
transition-property: background-color ,transform;/* 净 现 计 第 
-moz-transition-property: background-color,-moz-transform; 
-webkit-transition-property: background-color, -webkit-transform; 
-o-transition-property: background-color,-0-transform’; 
transition-duration: 3s; 
-moz-transition-duration: 3s; 
-webkit-transition-duration: 3s; 
-o-transition-duration: 3s; 

















图 13-53 图 13-54 


区 2 玫 在 该 CSS 样式 代码 中 修改 transition-property 属性 值 为 all， 并 添加 transition-delay 属 
性 设置 ， 如 图 13-55 所 示 。 保 存 页 面 并 保存 外 部 CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 当 光标 
移 至 页 面 中 的 logo 元 素 上 方 时 ， 需 要 等 待 延迟 时 间 后 才 开 始 显示 过 渡 效 果 ， 如 图 13-56 所 示 。 


wogo { 
width: 313px; 
height: 313px; 
background-color: #E92269; 
text-align: center; 





margin: Opx auto; 

padding: 26px; 
transition-property: all; 
-moz-transition-property: all; 
-webkit-transition-property: all; 
-o-transition-property: all; 
transition-duration: 3s;/* 
-moz-transition-duration: 3s; 
-webkit-transition-duration: 3s; 
-o-transition-duration: 3s; 
i wr 
-webkit-transition-delay: 566ms; ee 
-0-transition-delay: 566ms; 














图 13-55 图 13-56 


设置 transition-property 属性 为 all， 表 示 元 素 的 所 有 属性 都 显示 过 渡 效 果 。 
此 处 设置 延迟 过 渡 时 间 transition-delay 属性 为 500ms, 表示 当 鼠 标 经 过 该 元 素 时 ， 
需要 等 待 500ms 后 才 产 生 过 渡 效 果 。 





transition-timing-function 属性 用 于 设置 动画 过 渡 的 速度 曲线 , 即 过 渡 方 式 。 该 属性 的 语法 如 下 。 
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transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | 


cubic-bezier (n,n,nn); 


transition-timing-function 属性 的 属性 值 说 明 如 表 13-8 所 示 。 
表 13-8 transition-timing-function 属性 值 说 明 


人 说 用 


TARL 表示 过 渡 动 画 一 直 保持 同一 速度 ， 相 当 于 cubic-bezier(0,0,1,1) 

省 于 二 二 沁 该 属性 值 为 transition-timing-function 属性 的 默认 值 , 表示 过 渡 的 速度 先 慢 、 再 快 、 
最 后 非常 慢 ， 相 当 于 cubic-bezier(0.25,0.1,0.25,1) 

这 = 表示 过 渡 的 速度 先 慢 ， 后 来 越 来 越 快 ， 直 到 动画 过 渡 结束 ， 相 当 于 cubic- 
bezier(0.42,0,1,1) 

3 表示 过 渡 的 速度 先 快 ， 后 来 越 来 越 慢 ， 直 到 动画 过 渡 结 束 ， 相 当 于 cubic- 
bezier(0,0,0.58,1) 

和 相当 于 cubic- 
bezier(0.42,0,0.58,1) 


[CCEOe5GTWAAT) 自 定义 贝 赛 尔 曲线 效果 ， 其 中 的 4 个 参数 为 从 0 到 1 的 数字 











设置 网 页 元 素 变形 过 渡 方式 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 13 章 \13-2-5.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-2-5.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-2-5.html”， 页 面 效果 如 图 13-57 所 示 。 转 换 到 
该 网 页 所 链接 的 外 部 样式 表 文 件 中 ， 找 到 名 为 #0go 的 CSS 样式 设置 代码 ， 如 图 13-58 所 示 。 


PLOTELIET. WE 及 [#1logo + 
EF width: 313px; 

height: 313px; 

background-color: #E92269; 

text-align: center; 

margin: Opx auto; 

padding: 20px; 

transition-property: atLL;/1* 交 现 过 渡 * 

-moz-transition-property: all; 

-webkit-transition-property 

-o-transition-property: a 

transition-duration: 3s; 

-moz-transition-duration: 3s; 
目前 国内 县 大 的 至 科 连 镇 -webkit-transition-duration: 3s; 

稻 承 “引领 关 食 潮流 、 介 导 品位 生活 ”的 径 记 理念 -o-transition-duration: 3s; 



























图 13-57 图 13-58 


[王国 在 该 CSS 样式 代码 中 添加 transition-timing-function 属性 设置 ， 如 图 13-59 所 示 。 保 存 
页 面 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 当 光标 移 至 页 面 中 的 logo 元 素 上 方 时 ， 
可 以 看 到 元 素 的 变形 过 渡 方式 ， 如 图 13-60 所 示 。 


人 @a314 








Logo 于 
width: 313px; 
height: 313px; 
background-cotor: #E92269; 
text-align: center; 
margin: Opx auto; 
padding: 29px3 
transition-property: all;/* 实 
-moz-transition-property: all; 
-webkit-transition-property 
-o-transition-property: all; 
transition-duration: 3s; 
-moz-transition-duration: 3s; 
-webkit-transition-duration: 3s; 
-o-transition-duration: 3s; 
transition-timing-function: ease-out; 
-moz-transition-timine- function: ease-out 
-webkit-transition-timing-function: ease-out; 
-o-transition-timing-function: ease-out; 









EL 
委 录 “ 引 久 美食 源流 、 介 忆 品 位 生 括 ”的 和 下 理 人 











} 





图 13-59 图 13-60 


设置 transition-timing-function 属性 为 ease-out， 表 示 过 渡 效 果 的 速度 越 来 
越 慢 。 当 鼠标 经 过 该 元 素 时 ， 快 速 产生 过 渡 效 果 ， 然 后 缓慢 地 结束 。 


在 前 面 学 习 了 CSS 3 的 变换 属性 transform 和 过 渡 属 性 transition， 通 过 将 这 两 种 属性 相 结合 ， 
在 网 页 中 能 够 轻松 地 实现 元 素 变换 过 渡 的 动画 效果 ， 从 而 有 效 地 增加 网 页 的 交互 性 。 本 节 将 带领 读者 
完成 一 个 动态 选项 卡 效果 的 制作 ， 注 意 学 习 transform 属性 和 transition 属性 的 结合 使 用 。 


制作 动态 选项 卡 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 13 章 \13-2-6.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-2-6.mp4 


[GE 执行 “文件 > 打开” 命令， 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-2-6.html”， 可 以 看 到 
页 面 的 效果 , 如 图 13-61 所 示 。 将 光标 移 至 名 为 card 的 Div 中 , 将 多 余 文 字 删 除 , 转换 到 代码 视图 中 ， 
在 该 Div 中 添加 项 目 列表 标签 并 输入 相应 文字 ， 如 图 13-62 所 示 。 


PTT 二 sh 有 


Kor 必 








<div id="card"> 
<ul> 
<1i><h1> 网 站 首页 </h1l><img src= 
"images/132603.png" width="136" height="136" 
alt='" /><P> 我 们 是 一 家 专业 互联 网 设计 机 构 ， 为 您 
提供 专业 的 、 全 方位 的 互联 网 解决 方案 ! </P></1i> 
</ul> 
</div> 








图 13-61 图 13-62 





IE 王 ”转换 到 该 网 页 链接 的 外 部 CSS 样式 文件 中 ， 创 建 名 为 #card li 的 CSS 样式 ， 如 图 13-63 
所 示 。 返 回 网 页 设计 视图 中 ， 可 以 看 到 页 面 的 效果 ， 如 图 13-64 所 示 。 
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#card it 
display: block; 
position: relative; 
Uist-style-type: none; 
width: 136px; 
height: 35epx; 
background-image: url(../images/132608.jpg); 
border: 2px solid #E8F4F7; 
padding: 25px 9px; 
margin-bottom: 66px; 
float: left; 
border-radius: 1epx; 
box-shadow: 2px 2px 16px #660; 
transition: all 1s ease-in-out; 

















图 13-63 图 13-64 


在 该 CSS 样式 中 ， 通 过 CSS 3 中 新 增 的 border-radius 属性 定义 元 素 的 
圆 角 半径 值 ， 通 过 新 增 的 box-shadow 属性 定义 元 素 的 阴影 效果 ， 通 过 新 增 的 
transition 属性 定义 元 素 的 过 渡 效 果 。 


[本 ”转换 到 外 部 样式 表 文 件 中 ， 创 建 名 为 #card h1 和 名 为 #card p 的 CSS 样式 ， 如 图 13-65 
所 示 。 返 回 网 页 设计 视图 中 ， 可 以 看 到 页 面 的 效果 ， 如 图 13-66 所 示 。 





#card hl { 
font-size: 24px; 
font-weight: bold; 
line-height: 469px; 





} 

#card pf{ 
margin-top: 26px; 
font-size: 14px; 
text-align: left; 

} 











图 13-65 图 13-66 


OB 转换 到 代码 视图 中 ， 在 名 为 card 的 Div 中 的 <ul> 标签 中 添加 多 个 <li> 标签 ， 并 分 别 在 每 
个 <li> 标签 中 添加 相应 的 内 容 ， 如 图 13-67 所 示 。 返 回 设计 视图 中 ， 可 以 看 到 制作 的 页 面 效果 ， 如 
13-68 所 示 。 





ov Hencard"> 








< 
Loch EE /hl cing arccvinagearaaaeea pngv width= 
ae ttm 1 你 
后 业 有 全 方 让 6 本 计 辣 有 方案 [< 2 -> 
RT 





inE src-nimagen]1I2eed. pen width™ 
"1a6" heiighz-maaen xp 专业 的 设计 团队 ， 优 表 的 设 十 理 令 ， 团 
多 交 县 信 办 大 站 设计 天 涩 工作 ， 广 永 打 过 完美 的 证 作 吕 ! -/P>- /1 
<L><hb 所 号 案 例 </h> <ing 2rcrnimageara32cc5-pngy width 
aaew height-"136m attcww 1>zp> 多 年 的 互联 网 设计 经 栓 ， 成 及 的 为 因 内 
许多 知名 企业 和 员 检 设计 下 等 ， 详 经 点 二 查看 >></Pp></ 13> 
<1t><hl> 服 务 内 容 </hl>cing src-"images/132666.png" width- 
"sen heisht="136m att=w /><P> 专 业 的 互联 后 妆 计 机 构 ， 力 多 解 各 种 互 
路 网 设计 是， 网 沾 、Logo、 呈 二 推广 ， 整 人 .<yPsc/ti> 
<ti>chl> 联 系 我 们 c/hl>cing src=nimages/132667-pngw width= 
的 
1 cypycrti> 























</div> 





图 13-67 13-68 
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国 畏 ”转换 到 代码 视图 中 ， 为 每 一 个 <li> 标签 添加 id 属性 设置 ， 如 图 13-69 所 示 。 转 换 到 外 部 


CSS 样式 表 文 件 中 ， 创 建 名 为 #card-1 和 #card-2 的 CSS 样式 ， 如 图 13-70 所 示 。 











ll <img src= 
t="139" alt="" /><P> 我 们 是 一 
位 的 互联 </P?</L1> 


1> 成 功 案例 </hl><img src= 
















#card-1 { 
z-index:1; 


left:150px; 


top:46px; 
transform: 


rotate(-20deg); 




















A dth="139”het1ght="139"”att="" /><P> 多 年 的 豆 } 
网 设 1 内 许多 和 隐没 计 风 5， 译 9 上 查看 >>cyp #card-2 { 
>c/ti> 
1 dncard-4" oR /ning src z-index:2; 
"mages/132605- png™ hz eight="136"” alt="" /><P> 专 业 的 互 
网 设 计 机 构 和 Left:76px; 
2 联系 我 们 </h1> cime src= Be top: 10px; 
/132607 width="130" hei tt="" /><P> 有 任何 的 站 要 二 
mee pnd tr oe beige 全 transform: rotate(-10deg) ; 
</ul> 
</div> 
图 13-69 图 13-70 


通过 z-index 属性 来 设置 网 页 元 素 的 芭 加 顺序 ， 通 过 CSS 3 新 增 的 transform 
属性 设置 rotate() 函数 ， 从 而 实现 元 素 旋转 相应 的 角度 。 





国 ” 保 存 页 面 并 保存 外 部 CSS 样式 表 文 件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 前 两 个 选项 卡 旋 
转 和 相互 声 加 的 效果 ， 如 图 13-71 所 示 。 返 回 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 #card-3、 
#card-4 和 #card-5 的 CSS 样式 ， 如 图 13-72 所 示 。 











#card-3 { 

z-index:3; 
} 
#card-4 { 

z-index:2; 

right:7px; 

top:10px; 

transform: rotate(1gdeg); 
} 
#card-5 { 

z-index:1; 

right:150px; 

top: 40px; 

transform: rotate(20deg); 
} 








图 13-71 


图 13-72 


[GE 返回 到 网 页 设计 视图 ， 可 以 看 到 页 面 的 效果 ， 如 图 13-73 所 示 。 保 存 页 面 并 保存 外 部 
CSS 样式 表 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 选项 卡 旋转 和 相互 芭 加 的 效果 ， 如 图 13-74 
所 示 。 
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图 13-73 图 13-74 


[到 ” 接 下 来 实现 鼠标 经 过 时 的 变形 过 渡 效 果 。 返 回 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 #card- 
1:hover 和 名 为 #card-2:hover 的 CSS 样式 ， 如 图 13-75 所 示 。 接 着 创建 名 为 #card-3:hover、 
#card-4:hover 和 #card-5:hover 的 CSS 样式， 如 图 13-76 所 示 。 





cursor: pointer 
z-index: 4 





transform: scale(1.2) rotate(2deg) 
cursor: pointer 

z-index: 4 cursor: pointer 

transform: scale(1.2) rotate(-18deg) z-index; 4 

transform: scale(1.2) rotate(12deg) 


cursor: pointer 
z-index: 4 





transform: scale(1.2) rotate(-8deg) 

















图 13-75 图 13-76 


在 各 元 素 的 hover 状态 CSS 样式 中 ， 通 过 cursor 属性 设置 光标 指针 效果 ， 通 


过 z-index 属性 设置 元 素 的 层 世 顺序 在 其 他 元 素 的 上 方 ， 通 过 transform 属性 同时 
设置 scale() 和 rotate() 函数 ， 同 时 实现 缩放 和 旋转 变形 操作 。 





国保 存 页 面 并 保存 外 部 CSS 样式 文件 ， 在 浏览 器 中 预览 页 面 ， 可 以 看 到 页 面 的 效果 ， 如 
13-77 所 示 。 如 果 将 光标 移 至 某 个 选项 卡 上 时 ， 可 以 看 到 变形 过 渡 的 动画 效果 ,如 图 13-78 所 示 。 


| 尖子 到 | 二 法 pyy 


| [ee 
bs ww) 是 ) 


人 
> 





图 13-77 图 13-78 
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在 前 两 节 中 介绍 的 元 素 变换 和 过 渡 效 果 是 使 用 CSS 样式 制作 动画 效果 的 基础 ， 但 还 不 是 真正 的 
动画 。 本 节 将 介绍 完整 的 CSS 3 动画 效果 实现 方法 ， 不 但 可 以 创建 动画 关键 帧 ， 还 可 以 对 关键 帧 动 
画 设置 播放 时 间 、 播 放 次 数 、 播 放 方 向 等 ， 从 而 实现 更 加 复杂 、 灵 活 的 网 页 动画 效果 。 


在 CSS 动画 设计 中 ， 关 键 帧 动画 是 非常 重要 的 功能 ， 它 所 包含 的 是 一 段 连续 的 动画 。 
CSS 样式 所 实现 的 动画 效果 ， 是 通过 从 一 种 样式 逐步 转变 到 另 一 种 样式 来 创建 的 。@key- 
frames 规则 的 语法 如 下 。 





keyframes<animationname> { 
<keyframes-selector>{ 
<css-styles> 

} 


@keyframes 规则 的 参数 说 明 如 表 13-9 所 示 。 
表 13-9 @keyframes 规则 的 参数 说 明 


EE 说 明 
Enimiatiomname 动画 的 名 称 。 必 须 定义 一 个 动画 名 称 ， 方 便 与 动画 属性 animation 绑 定 


动画 持续 时 间 的 百分比 ， 也 可 以 是 from 和 to。from 对 应 的 是 0%，to 对 应 的 是 
100%， 建 议 使 用 百分比 。 该 参数 必须 定义 ， 才 能 实现 动画 


Ry 设置 的 一 个 或 多 个 合法 的 样式 属性 。 该 参数 必须 定义 ， 才 能 实现 动画 


关键 帧 动画 是 通过 名 称 与 动画 绑 定 的 , 使 用 动画 属性 来 控制 动画 的 呈现 。 在 指定 CSS 样式 变化 时 ， 
可 以 从 0% 至 100%， 逐 步 设计 样式 的 变化 。 


制作 简单 的 关键 帧 动画 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 13 章 \13-3-1.html 。” 视频 : 光盘 \ 视 频 \ 第 13 章 \13-3-1.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-3-1.html”， 页 面 效果 如 图 13-79 所 示 。 转 换 到 
该 网 页 所 链接 的 外 部 样式 表 文 件 中 ， 找 到 名 为 #fish 的 CSS 样式 设置 代码 ， 如 图 13-80 所 示 。 


后 向 [二 am 直 刘 wnaoasa 二 能 








#fish { 
position: absolute; 
width: 256px; 
height: 1l95px; 











图 13-79 图 13-80 
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葬 畏 在 该 CSS 样式 代码 中 添加 animation 属性 设置 ， 绑 定 动画 ， 如 图 13-81 所 示 。 在 外 部 
CSS 样式 表 中 创建 @keyframes 规则 ， 创 建 关键 帧 动画 ， 如 图 13-82 所 示 。 





* 针 对 gecko 内 祸 ， 创建 关 键 帧 动画 * 
@-moz-keyframes mymove { 
6g% Ttop:98px; left:-256px;} 
25% {top:300px; left:200px;} 
56% {top: 460px; left:460px;} 
75% {top:566px; left:680px;} 
Hish { 160% {top:250px; left:966px;} 








position: absolute; } 
width: 256px; * 针 对 webkit 内 核 ,创建 关键 帆 动 画 * 
height: 195px; @-webkit-keyframes-mymove { 

* 针 对 geckoP 述 ，mymove 绑 定 到 动画 * 9% {top:90px; left:-256px;} 





-moz-animation: infinite; 0 ee ee 
x 针 对 webkjt 内 核 ，m move 绑 定 到 动画 * 56% {top: 466px; Left:496px3] 
tIwebkitr i%, mymove 75% {top:500px; left:600px;} 


-webkit-animation: mymove 15s infinite; 166% {top:250px; left:900px;} 

















图 13-81 图 13-82 


通过 @keyframes 规则 创建 了 名 为 mymove 的 关键 帧 动画 ， 并 将 该 关键 帧 动 
画 绑 定 到 相应 的 元 素 中 。 在 浏览 器 中 预览 页 面 时 ， 可 以 看 到 鱼 在 网 页 中 游 动 的 关键 
帧 动画 效果 。 
国葬 保存 页 面 并 保存 外 部 CSS 样式 表 文件 ， 在 Firefox 浏览 器 中 预览 页 面 ， 可 以 看 到 鱼 在 网 页 
中 游 动 的 动画 效果 ， 如 图 13-83 所 示 。 





在 CSS 3 中 新 增 了 专门 用 于 实现 动画 效果 的 animation 属性 ， 通 过 该 属性 可 以 把 一 个 或 多 个 关 
键 帧 动画 绑 定 到 元 素 上 ， 从 而 实现 更 加 复杂 的 动画 和 效果 。 
animation 属性 用 于 同时 定义 动画 所 需要 的 完整 信息 ， 该 属性 的 语法 如 下 。 


animation: <name> <duration> <timing-function> <delay> <iteration-count><direction>; 


animation 属性 的 属性 值 说 明 如 表 13-10 所 示 。 
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表 13-10 animation 属性 值 说 明 
明 


说 
ame LU 用 于 设置 动画 的 名 称 ， 绑 定 指定 的 关键 帧 动画 
EUaion 用 于 设置 动画 播放 的 周期 时 间 


[mingsfUnction 用 于 设置 动画 播放 的 方式 ， 即 速度 曲线 
Raa 用 于 设置 动画 的 延迟 时 间 
[SETatonsCOUnES | 用 于 设置 动画 播放 的 次 数 
OFECHOTRLLLLLL 用 于 设置 动画 播放 的 顺序 方向 


animation 属性 可 能 定义 一 个 动画 的 6 个 方面 的 参数 信息 ， 还 可 以 同时 定义 多 
个 动画 ， 每 个 动画 的 参数 信息 为 一 组 ， 使 用 逗号 进行 分 隔 。 








animation 属性 是 一 个 复合 属性 ， 根 据 其 语法 定义 ，animation 属性 包含 6 个 子 属 性 : 
animation-name( 指定 动画 名 称 )、animation-duration( 指定 动画 播放 时 间 )、animation- 
timing-function( 延迟 动画 播放 方式 )、animation-delay( 指定 动画 延迟 时 间 )、animation-- 
iteration-count( 指定 动画 播放 次 数 ) 和 animation-direction( 指定 动画 播放 方向 ) 。 

基于 webkit 内 核 的 浏览 器 需要 在 属性 名 称 前 增加 前 级 “-webkit-”， 基 于 gecko 内 核 的 浏览 
器 需要 在 属性 名 称 前 增加 前 缀 “-moz-”， 基 于 presto 内 核 的 浏览 器 需要 在 属性 名 称 前 增加 前 级 

“-o-”， 以 使 用 各 种 内 核 的 私有 属性 。 

》1. animation-name 属性 

animation-name 属性 用 来 定义 动画 的 名 称 ， 它 是 一 个 动画 关键 帧 的 名 称 ， 是 由 @keyframes 
规则 定义 的 。animation-name 属性 的 语法 如 下 。 


animation-name: <keyframename> | none; 


animation-name 属性 的 属性 值 说 明 如 表 13-11 所 示 。 


表 13-11 animation-name 属性 值 说 明 
说 明 
<keyframename> 用 于 指定 动画 名 称 ， 即 指定 名 称 对 应 的 动画 关键 帧 
[GAS LU 默认 值 ， 表 示 没有 动画 效果 


如 果 动 画 关键 帧 的 名 称 为 none， 则 不 会 显示 动画 ; 可 以 同时 指定 多 个 动画 名 称 ， 多 个 名 称 之 间 
使 用 喜 号 进行 分 隔 ; 如 果 需 要 ， 可 以 使 用 none， 取 消 任何 动画 效果 。 
》2. animation-duration 属性 

animation-duration 属性 用 来 定义 动画 播放 的 周期 时 间 ， 语 法 如 下 。 


animation-duration: <time>7 

<time> 参数 值 用 于 指定 播放 动画 的 时 间 长 度 ， 单 位 为 m( 秒 ) 或 ms( 毫秒 )。 默 认 值 为 0， 表示 
没有 动画 。 
》3. animation-timing-function 属性 

animation-timing-function 属性 用 来 定义 动画 的 播放 方式 ， 语 法 如 下 。 
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animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | 


cubic-bezier (nrnrnrn)7 


animation-timing-function 属性 的 属性 值 与 transition-timing-function 属性 的 属性 值 相同 ， 
其 作用 也 是 相同 的 。 
》4. animation-delay 属性 

animation-delay 属性 用 来 定义 动画 播放 的 延迟 时 间 ， 可 以 定义 一 个 动画 延迟 一 段 时 间 再 开始 播 
放 。animation-delay 属性 的 语法 如 下 。 


animation-delay: <time>; 


<time> 参数 值 用 于 指定 延迟 的 时 间 长 度 ， 单 位 为 m( 秒 ) 或 ms( 毫秒 )， 默 认 值 为 0， 表示 没有 
时 间 延 迟 ， 直 接 播放 动画 。 
》5. animation-iteration-count 属性 

animation-iteration-count 属性 用 来 定义 动画 循环 播放 的 次 数 ， 语 法 如 下 。 


animation-iteration-count: infinite | <n>; 


animation-iteration-count 属性 的 属性 值 说 明 如 表 13-12 所 示 。 
表 13-12 animation-iteration-count 属性 值 说 明 


全 | 说 明 
[mmite 表示 无 限 循环 进行 播放 
该 值 为 数字 ， 表 示 循 环 播放 的 次 数 。animation-iteration-count 属性 的 默认 值 为 1， 
表示 动画 只 播放 一 次 


》6. animation-direction 属性 
animation-direction 属性 用 来 定义 动画 循环 播放 的 方向 ， 语 法 如 下 。 


animation-direction: normal | alternate; 


animation-direction 属性 的 属性 值 说 明 如 表 13-13 所 示 。 
表 13-13 animation-direction 属性 值 说 明 


属性 值 | 说 了 明 
[ma 四 该 属性 值 为 默认 值 ， 表 示 按 照 关键 帧 所 设置 的 动画 方向 播放 


Gale 表示 动画 的 播放 方向 与 上 一 播放 周期 相反 ， 第 一 播放 周期 还 是 正常 的 播放 方向 


为 元 素 绑 定 多 个 关键 帧 动画 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 13 章 \13-3-2.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-3-2.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 13 章 \13-3-2.html”， 页 面 效果 如 图 13-84 所 示 。 转 换 到 
该 网 页 所 链接 的 外 部 样式 表 文 件 中 ， 找 到 名 为 #ish 的 CSS 样式 设置 代码 ， 在 该 CSS 样式 中 添加 
animation-name animation-iteration-count 和 animation-duration 属性 设置 ,如 图 13-85 所 示 。 
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#fish { 
position: absolute; 
width: 256px; 





定 两 个 关键 帧 动 男 * 
-moz-animation-name: mymove,myrotate; 
-webkit-animation-name: mymove,myrotate; 
* 设 置 关 键 帧 动画 无 限 循环 * 
-moz-animation-iteration-count: infinite; 


-webkit-animation-iteration-count: infinite; 
* 设 置 关键 帧 动画 播放 时 间 */ 
-moz-animation-duration: 15s; 
-webkit-animation-duration: 15s; 








图 13-84 图 13-85 


葬 zB 在 外 部 CSS 样式 表 中 通过 @keyframes 规则 ， 创 建 名 称 为 mymove 的 关键 帧 动画 ， 如 图 
13-86 所 示 。 通 过 @keyframes 规则 ， 创 建 名 称 为 myrotate 的 关键 帧 动画 ， 如 图 13-87 所 示 。 


* 创 建 天 键 帧 动 男 mymove 
@-moz-keyframes mymove { 



































1* 创 建 关键 帧 动画 mvrotate* 

6% {top:90px; left:-256px;} 者 si 力 国 myrotate 

56% {top: 466px; left:5e0px;} | |e-moz ig myrotate { 

166% {top:120px; left:1000px;} 506% {-moz-transform: rotate(30deg);} 
} 1965 {-moz-transform: rotate(-30deg);} 
@-webkit-keyframes mymove { 人 

6% {top:90px; left:-256px;} @-webkit-keyframes myrotate { 

56% {top: 466px; left:560px;} 56% {-webkit-transform: rotate(306deg);} 

166% {top:120px; left:1000px;} 166% {-webkit-transform: rotate(-30deg);} 
} } 

图 13-86 图 13-87 


葬 5 葬 | 保存 页 面 并 保存 外 部 CSS 样式 表 文件 ， 在 Firefox 浏览 器 中 预览 页 面 ， 可 以 看 到 为 网 页 元 
素 绑 定 多 个 关键 帧 动画 的 效果 ， 如 图 13-88 所 示 。 








13-88 


通过 @keyframes 规则 创建 了 两 个 关键 帧 动画 ， 分 别 是 移动 动画 mymove 和 
旋转 变形 动画 myrotate。 在 animation-name 属性 中 ， 同 时 指定 了 这 两 个 关键 帧 
动画 ， 并 在 animation-duration 属性 中 设置 了 相同 的 动画 播放 周期 时 间 。 在 浏览 器 
中 预览 时 ， 页 面 元 素 会 同时 执行 所 设置 的 两 个 关键 帧 动画 效果 。 





323 四 





CSS 3 中 新 增 的 用 于 创建 关键 帧 动画 的 @keyframes 和 animation 属性 虽然 目前 还 没有 得 到 
浏览 器 的 广泛 支持 ， 但 是 其 所 能 实现 的 动画 效果 能 够 让 我 们 领略 到 CSS 3 的 强大 功能 。 在 本 节 中 将 
综合 使 用 本 章 中 所 介绍 的 transition 属性 、animation 属性 和 @keyframes 规则 制作 交互 导航 菜单 
动画 效果 。 


制作 交互 导航 菜单 动画 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 13 章 \13-3-3.html 。 视频 : 光盘 \ 视 频 \ 第 13 章 \13-3-3.mp4 


[GE 执行 “文件 > 打开 ”命令 ， 打 开 页 面 “光盘 \ 源 文件 \ 第 13 章 \13-3-3.html”， 可 以 看 到 
页 面 效果 ， 如 图 13-89 所 示 。 转 换 到 该 网 页 链接 的 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 @font-face 
的 CSS 规则 ， 加 载 外 部 字体 ， 如 图 13-90 所 示 。 


PT 站 








@font-face { 
font-family: "webfont"; 
src:url("../images/websymbols.woff") format("woff"), 
url("../images/websymbols. ttf") format("truetype"); 











图 13-89 图 13-90 


此 处 使 用 CSS 3 新 增 的 @font-face 规则 加 载 外 部 字体 ， 加 载 的 两 个 外 部 字体 
是 websymbols.t 好 和 websymbols.woff, 这 两 个 字体 文件 被 放置 在 images 目录 中 ， 
在 本 实例 中 使 用 这 种 特殊 的 字体 可 以 将 英文 字母 转换 为 相应 的 图 形 。 





四 返回 网 页 设计 视图 ,将 光标 移 至 名 为 box 的 Div 中 , 将 多 余 文 字 删 除 ， 输 入 相应 的 段落 文本 ， 
并 将 段落 文本 创建 为 项 目 列表 ， 如 图 13-91 所 示 。 转 换 到 代码 视图 中 ， 可 以 看 到 该 部 分 项 目 列表 的 
代码 ， 如 图 13-92 所 示 。 





<body> 
<div id="box"> 
<UL> 
<1i> 首 页 </1i> 
<1i> 联 系 我 们 </1i> 
<1i> 关 于 我 们 </1i> 
<1i> 我 们 的 作品 </1i> 
<1i> 设 计 理念 </1i> 
</ul> 
</div> 


</body> 


图 13-91 图 13-92 
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国 畏 ”转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 #box li 的 CSS 样式 ， 如 图 13-93 所 示 。 返 回 
网 页 设计 视图 中 ， 可 以 看 到 页 面 的 效果 ， 如 图 13-94 所 示 。 


#box Li{ 
position: relative; 
width: 560px; 
height: 1606px; 
overflow: hidden; 
margin-bottom: 19px; 
background-color: #FFF; 
color: #333; 
list-style-type: none; 
box-shadow: 2px 2px 4px rgba(0, ©, 0, 0.2); 
transition: all 9.8s ease; 

















图 13-93 图 13-94 


在 名 为 #box li 的 CSS 样式 代码 中 ， 使 用 CSS 3 新 增 的 box-shadow 属性 为 
提示 元 素 添加 阴影 效果 。transition 属性 允许 元 素 属性 在 一 定 的 时 间 区 间 内 平滑 地 过 渡 ， 
这 种 效果 可 以 在 鼠标 单 击 、 获 得 焦点 、 被 点 击 或 对 元 素 任何 改变 中 触发 ， 并 平滑 地 
显示 元 素 属性 改变 过 程 的 动画 效果 。 


将 光标 移 至 “首页 ” 文字 之 前 , 在 光标 所 在 位 置 插入 一 个 无 id 名 称 的 Div, 如 图 13-95 所 示 。 
转换 到 外 部 CSS 样式 表 文 件 中 ， 创 建 名 为 .border01 的 类 CSS 样式 ， 如 图 13-96 所 示 。 


.border6l { 
position: absolute; 


| 


height: 166px; 
overflow: hidden; 
left: Opx; 


top: Opx; 

















联系 我 们 background-color: #F96; 
‘opacity: 0; 
transition: all 0.8s ease; 
图 13-95 图 13-96 


国 蜀 ”返回 网 页 代码 视图 中 ， 为 刚 插入 的 Div 应 用 刚 定义 的 名 为 border01 的 类 CSS 样式 ， 并 将 
该 Div 中 多 余 的 文字 删除 ， 为 “首页 ”文字 添加 <div> 标签 ， 并 且 添 加 相应 的 <h2> 和 “<h3> 标签 和 
文字 ， 如 图 13-97 所 示 。 返 回 设计 视图 中 ， 可 以 看 到 页 面 的 效果 ， 如 图 13-98 所 示 。 





<ul> 
<Ui> 
div class="borderol™></div> 
<div> 
<h2><a href="#"> 首 页 </a></h24| 





</T> 
<11> 联 系 我 们 </11> 
<1i> 关 于 我 们 </1i> 
<1i> 我 们 的 作品 </1i> 
<1i> 设 计 理 念 -/11> 
</ut> 
Cd 


图 13-97 13-98 
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E 国 ”转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 .text 的 类 CSS 样式 ， 如 图 13-99 所 示 。 返 回 
网 页 设计 视图 ， 为 刚 添加 的 Div 应 用 名 为 text 的 类 CSS 样式 ， 效 果 如 图 13-100 所 示 。 





.text{ 
width: 3068px; 
height: 79pxj; 
margin-top: 24px; 
float: left; 
-webkit-animation: 1s 9.5s ease both; 
-moz-animation: 1s 9.5s ease both; 














} 
图 13-99 图 13-100 
在 名 为 .text 的 类 CSS 样式 代码 中 ， 使 用 CSS 3 新 增 的 animation 属性 为 元 
素 添加 动画 效果 ， 目 前 IE11 还 不 支持 该 属性 ， 在 这 里 使 用 针对 webkit 和 gecko 内 
核 的 私有 属性 进行 设置 。 


[GE 转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 .text h2,.text a 和 名 为 .text h3 的 CSS 样式 ， 
如 图 13-101 所 示 。 返 回 设计 视图 ， 可 以 看 到 页 面 的 效果 ， 如 图 13-102 所 示 。 


.text h2,.text af 
text-shadow: lpx 2px 4px #999; 
font-size: 30px; 
color: #333; 
text-decoration: none; 
transition: all 0.8s ease; 











3 
.text h3{ 
font-family: Verdana; 
font-size: 14px; 
color: #666; 
transition: all 0.8s ease; 
. 








图 13-101 图 13-102 


王国 ”转换 到 代码 视图 中 ， 在 相应 的 位 置 添加 <span> 标签 和 文字 ， 如 图 13-103 所 示 。 转 换 到 外 
部 CSS 样式 表 文件 中 ， 创 建 名 为 .icon 的 类 CSS 样式 ， 如 图 13-104 所 示 。 





<div id="box"> .icon { 
i width: 90px; 
<div class="border@1"></div> height: 96px; 
<span>Z</span> margin: 5px 26px 9px 20px; 
div class="text"> 四 站 
<h2><a href="#"> 首 页 </a></h2> float: Left; 
<h3>Home</h3> font-family: "Webfont"; 
</div> font-size: 30px; 
</ti> nachetaes 。 
<11> 联 系 我 们 </11> lLine- hetght: 96px; 
<1i> 关 于 我 们 </1i> text-align: center; 
Dh ab text-shadow:© © 3px #CCCCCC; 
ee/ transition: all 0.8s ease; 
</div> } 

















图 13-103 13-104 
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[ 国 国 ”返回 网 页 代码 视图 中 ， 在 刚 添加 的 <span> 标签 中 应 用 刚 创建 的 名 为 icon 的 类 CSS 样式 ， 
如 图 13-105 所 示 。 返 回 网 页 设计 视图 ， 可 以 看 到 页 面 的 效果 ， 如 图 13-106 所 示 。 


<div id="box"> 
<ul> 









<ti> 
<div ctass="border6l"></div> 
<span_class="icon">z</span> 





<div class="text"> 
<h2><a href="#"> 首 页 </a></h2> 
<h3>Home</h3> 
</div> 

</Ui> 

<11> 联 系 我 们 </1i> 

<11> 关 于 我 们 </1i> 

<11 ;我们 的 作品 </1i> 

<11> 设 计 理 念 </1i> 

</ul> 
</div> 














图 13-105 图 13-106 


本 ”使 用 相同 的 制作 方法 ， 可 以 完成 其 他 <li> 标签 中 内 容 的 制作 ， 如 图 13-107 所 示 。 返 回 到 网 
页 设计 视图 ， 可 以 看 到 页 面 的 效果 ， 如 图 13-108 所 示 。 






























<Li> <1Li> 
<div class="border@1"></div> <div class="border01"></div> 
<span class="icon">N</span> <span class="icon">F</span> 
<div class="text"> <div class="text"> 
<h2><a href="#"> 联 系 我 们 </a></h2> | <h2><a href="#"> 我 们 的 作品 </a></h2> 
<h3>Contact US</h3> <h3>Qur Work</h3> 
</div> </div> 
cti> </Ui> 
<1i> <1i> 
<div class="border@1"></div> <div class="border01"></div> 
<span class="icon">S</span> <span class="icon">B</span> 
<div class="text"> <div class="text"> 
<h2><a href="#"> 关 于 我 们 </a></h2> <h2><a href="#"> 设 计 理念 </a></h2> 
<h3>About US</ha> <hs>Design idea</h3> 
</div> </div> 
ct> /> 
图 13-107 图 13-108 


转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 名 为 #box li:hover 和 名 为 #box li:hover .border01 
的 CSS 样式 ， 如 图 13-109 所 示 。 接 着 创建 名 为 #box li:hover h2,#box li:hover a 和 名 为 #box 
li:hover .text h3 的 CSS 样式 ， 如 图 13-110 所 示 。 























#box li:hover h2,#box Li:hover af 
color: #FFF; 

#box li:hover { font-size: 18px; 
background-color: #668; text-shadow: lpx 2px 4px #333; 
box-shadow: 2px 2px 4px rgba(9, 8, 9, 09.4);| |} 

} #box 1li:hover .text h3{ 

#box li:hover .bordergl { color: #F60; 
opacity: 1; font-size: 18px; 
left: 490px; margin-top: 19px; 

} 要 

图 13-109 图 13-110 


可 在 外 部 CSS 样式 表 文 件 中 创建 名 为 #box li:hover .icon 和 名 为 #box li:hover .text 的 CSS 
样式 ， 如 图 13-111 所 示 。 接 着 通过 keyframes 规则 创建 动画 ， 如 图 13-112 所 示 。 
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#box Li:hover .iconf @-webkit-keyframes mymove{ 

人 。 0%,100%{-webkit-transform: transLate(9px;,9px) 3 
color: SERS 20%,60%{-webkit-transform: translate(-10px,px);} 
font-size: 50px; 405%, 30%{ -webkit-transform:translate(10px,epx) ;} 

: } 
#box li:hover .text{ @-moz-keyframes mymove{ 
计 | PE .| |6%,100%{-moz-transform:translate (epx,Opx);} 
we De ET NE 28%,60%{-moz-transform:translate(-10px,Opx);} 
-moz-animation-name: mymove; 40%,80%{-moz-transform: translate (10px, 6px) ;} 


} } 


图 13-111 图 13-112 

















E 本 一 ”保存 页 面 并 保存 外 部 CSS 样式 文件 ， 在 Firefox 浏览 器 中 预览 页 面 ， 可 以 看 到 导航 菜单 的 
效果 ， 如 图 13-113 所 示 。 将 光标 移 至 各 导航 菜单 项 上 时 ， 可 以 看 到 导航 菜单 的 交互 动画 效果 ， 如 
图 13 一 114 所 示 。 























图 13-113 图 13-114 


本 章 向 读者 介绍 了 实现 元 素 变 换 的 transform 属性 、 实 现 元 素 过 渡 效 果 的 transition 属性 和 实现 
动画 设计 的 @keyframes 规则 和 animation 属性 。 读 者 需要 重点 掌握 元 素 的 各 种 变换 方法 和 过 渡 效 
果 的 实现 ， 从 而 能 够 在 网 页 中 实现 简单 的 动画 效果 。 
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第 必 章 jQuery 和 jQuery 9 


Mobile 基础 


jQuery Mobile 是 专门 针对 移动 终端 设备 的 浏览 器 开发 的 Web 
脚本 框架 ， 它 基于 强悍 的 jQuery 和 jQuery UI 基础 之 上 , 统一 用 户 
系统 接口 ， 能 够 无 颖 运行 于 所 有 流行 的 移动 平台 之 上 。 本 章 将 向 读 
者 介绍 JavaScript 和 jQuery 的 相关 基础 知识 ， 这 些 都 是 jQuery 
Mobile 的 基础 ， 并 且 重 点 介绍 了 jQuery Mobile 的 基础 。 








JavaScript 是 最 常见 的 脚本 语言 ， 它 可 以 嵌入 到 HTML 中 ， 
最 佳 选择 ， 同 时 也 是 浏览 器 普遍 支持 的 网 页 脚本 语言 。 





MY 了 解 什 么 是 jQuery 以 及 在 网 
页 中 引用 jQuery 函数 库 的 方法 

理解 jQuery 基础 语法 以 及 选 
择 器 的 使 用 

了 解 jQuery Mobile 以 及 
jQuery Mobile 的 功能 特点 

YW 理解 jQuery Mobile 的 操作 流程 


掌握 创建 基础 的 jQuery 
Mobile 页 面 的 方法 





在 客户 端 执行 ， 是 网 页 特效 制作 的 


JavaScript 是 一 种 基于 对 象 并 且 通 过 事件 进行 驱动 的 脚本 编程 语言 。 其 程序 代码 说 在 HTML 网 
页 文件 中 ， 需 要 浏览 者 的 浏览 器 进行 解释 运行 。 前 面 所 学 习 的 HTML 属于 一 种 标记 语言 ， 是 用 某 种 
结构 储存 数据 并 在 设备 上 显示 的 手段 ， 两 者 属于 完全 不 同 的 概念 。 在 一 个 完整 的 网 页 中 是 离 不 开 





















































JavaScript 程序 的 ， 因 为 有 太 多 的 功能 需要 它 来 实现 。 如 果 只 是 想 单纯 地 显示 网 页 的 基本 内 容 ， 那 

















么 就 没有 必要 再 使 用 JavaScript 程序 了 。 





jQuery 是 JavaScript 函数 库 ， 简 化 了 HTML 与 JavaScript 之 间 复 杂 的 处 理 过 程 ， 重 点 是 不 


























烦恼 关于 跨 浏览 器 的 问题 ， 因 为 jQuery 已 经 帮 有 我 们 写 好 了 。 





























在 介绍 jQuery 之 前 , 希望 读者 先 了 解 一 些 JavaScript 的 基础 语法 , 这 样 学 习 jQuery 时 事半功倍 。 








JavaScript 有 着 非常 严格 的 编写 规范 ， 在 前 面 的 HTML 学 习 中 了 解 到 JavaScript 包含 在 网 页 
的 <script> 与 </script> 标签 中 。 由 于 JavaScript 程序 代码 嵌入 在 HTML 代码 中 ， 为 了 使 页 面 代码 




















结构 清晰 ， 设 计 者 经 常 把 JavaScript 部 分 的 代码 放置 在 头 部 信息 





区 。 当 然 ， 也 可 以 在 HTML 文档 中 











多 处 伐 入 JavaScript 代码 ， 但 并 不 倡导 这 样 的 做 法 。 因 为 浏览 器 解析 HTML 文档 时 是 自 上 而 下 的 顺 
序 ， 设 计 者 需要 确保 JavaScript 代码 被 优先 解析 。 

在 前 面 的 HTML 学 习 过 程 中 ， 接 触 了 部 分 的 JavaScript 程序 嵌入 方法 ， 第 一 种 是 将 程序 代码 直 
接 放 入 <script></script> 中 。 


<html> 

<head> 

<script type="text/javascript"> 
javascript 程序 代码 

</script> 

</head> 


</html> 


第 二 种 是 编写 在 外 部 的 js 文件 中 , 然后 通过 类 似 于 链接 外 部 CSS 文件 的 方式 链接 到 HTML 文档 中 。 


<html> 

<head> 

<script type="text/javascript" src="JavaScript 文件 路 径 "> 
</script> 

</head> 


编写 JavaScript 程序 代 码 与 网 页 代码 类 似 , 推荐 使 用 Dreamweaver 来 编写 JavaScript 程 序 代码 。 


JavaScript 的 运算 符 是 一 些 特定 符号 的 集合 ， 这 些 符号 用 来 操作 数据 按 特定 的 规则 进行 运算 ， 并 
生成 结果 。 运算 符 所 操作 的 数据 被 称 为 操作 数 , 运算 符 和 操作 数 连 接 并 可 运算 出 结果 的 式 子 就 是 表达 式 。 
》1.， 算术 运算 符 

算术 运算 符 中 包含 加 法 (+)、 减 法 (-)、 乘 法 (*)、 除 法 /) 和 取 余 (%) 运算 符 。 加 减 乘 除 和 数学 
中 的 加 减 乘 除 一 样 ， 都 是 二 元 运算 符 ， 乘 法 和 除法 的 优先 级 高 于 加 法 和 减法 。 而 取 余 运算 符 也 是 二 元 
运算 符 ， 可 以 用 于 求 两 个 操作 数 相 除 后 的 余数 。 

》2. 赋值 运算 符 

JavaScript 中 的 赋值 运算 符 “=” 并 不 是 等 于 符号 ， 而 是 将 右边 操作 数 的 值 赋值 给 左边 的 操作 数 

(一 般 为 变量 )， 称 之 为 赋值 表达 式 。 


等 于 符号 在 JavaScript 中 为 “==”， 判 断 两 边 的 操作 数 的 值 是 否 相 等 。 如 果 相 
等 则 返回 true， 反 之 则 返回 false， 只 含有 等 于 表达 式 的 程序 语句 是 没有 任何 意义 的 。 


赋值 运算 符 和 基本 运算 符 结合 形成 多 种 赋值 运算 符 ， 如 以 下 语句 。 
Xl1= Xl1+x2; 


以 上 代码 可 以 用 加 赋值 符号 的 语句 代替 ， 编 写 方法 如 下 。 
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和 1+=X27 


类 似 的 方法 可 得 出 减 赋值 符号 “-=”、 乘 赋值 符号 “*=”、 除 赋值 符号 “/=” 和 取 余 赋值 符号 “%=”。 
》 3.， 递增 和 递减 运算 符 

为 了 简化 代码 的 编写 ，JavaScript 提供 了 递增 运算 符 “++” 和 递减 运算 符 “--”。 递 增 和 递减 
运算 符 都 是 一 元 运算 符 ， 递 增 运算 符 可 使 操作 数 加 1， 递 减 运算 符 可 使 操作 数 减 1 。 递 增 运 算 符 “++” 
位 于 操作 数 左 边 时 ， 称 为 前 增 ， 即 操作 数 先 加 1， 然 后 参与 其 他 运算 ; 反之 称 为 后 增 ， 即 操作 数 先 参 
加 其 他 运算 ， 然 后 增加 1。 递 减 运算 符 “-- ”位 于 操作 数 左 边 时 ， 称 为 前 减 ， 即 操作 数 先 减 1， 然 后 
参与 其 他 运算 ; 反之 称 为 后 减 ， 即 操作 数 先 参加 其 他 运算 ， 然 后 减 1。 
》4. 关系 运算 符 

JavaScript 中 的 关系 运算 符 用 于 测试 操作 数 之 间 的 关系 ， 如 大 小 比较 、 是 否 相等 ， 依 据 这 些 关 
系 存 在 与 否 返回 一 个 布尔 型 数据 值 ， 即 true( 真 ) 或 者 false( 假 )。 比 较 运算 符 是 关系 运算 符 中 最 常 
用 的 一 种 运算 符 。 常 用 的 关系 运算 符 如 表 14-1 所 示 。 


表 14-1 常用 的 关系 运算 符 
说 明 
UL 如 果 左 边 的 操作 数 小 于 右边 的 操作 数 ， 则 返回 true( 真 )， 反 之 ， 则 返回 false( 假 ) 
医 由 如 果 左 边 的 操作 数 小 于 等 于 右边 的 操 数 ， 则 返回 true( 真 )， 反 之 ， 则 返回 false( 假 ) 
ALL 如 果 左边 的 操作 数 大 于 右边 的 操作 数 ， 则 返回 true( 真 )， 反 之 ， 则 返回 false( 假 ) 
SU 如 果 左 边 的 操作 数 大 于 等 于 右边 的 操作 数 ， 则 返回 true( 真 )， 反 之 ， 则 返回 false( 假 ) 
EL 如 果 左 边 操作 数 等 于 右边 的 操作 数 ， 则 返回 true( 真 )， 反 之 ， 则 返回 false( 假 ) 
[LU 如 果 左边 操作 数 不 等 于 右边 的 操作 数 ， 则 返回 true( 真 )， 反 之 ， 则 返回 false( 假 ) 
EL 如 果 左 边 操作 数 全 等 于 右边 的 操作 数 ， 则 返回 true( 真 )， 反 之 ， 则 返回 false( 假 ) 
IE 如 果 左 边 操作 数 没 有 全 等 于 右边 的 操作 数 ， 则 返回 true( 真 )， 反 之 ， 则 返回 false( 假 ) 


等 于 “==” 和 全 等 于 “===” 运 算 符 都 是 用 于 测试 两 个 操作 数 的 值 是 否 相等 ， 
国 操作 数 可 以 使 用 任意 数据 类 型 。 等 于 “==” 对 操作 数 一 致 性 要 求 比较 宽松 ， 可 以 通 
过 数据 类 型 转换 后 进行 比较 ， 而 全 等 于 “===” 对 操作 数 要 求 就 比较 严格 。 

》5. 逻辑 运算 符 

在 JavaScript 中 , 逻辑 运算 符 一 般 用 于 执行 布尔 型 数据 ， 因 为 关系 运算 符 的 返回 值 ( 结果 ) 为 布 
尔 型 数据 ， 所 以 逻辑 运算 符 常 和 比较 运算 符 配合 使 用 。 通 常情 况 下 ， 逻 辑 运 算 符 的 返回 值 也 是 布尔 型 
数据 ， 不 过 操作 数 都 是 数字 型 时 ， 逻 辑 运算 符 的 返回 值 也 为 数字 型 。 逻 辑 运 算 符 包括 逻辑 与 运算 符 、 
逻辑 或 运算 符 和 逻辑 非 运算 符 等 ， 说 明 如 表 14-2 所 示 。 


表 14-2 ”常用 的 逻辑 运算 符 
说 明 

该 运算 符 是 二 元 运算 符 ， 当 上 且 仅 当 两 个 操作 数 的 值 都 为 true 时 ， 逮 辑 与 运算 符 运 算 返 回 
的 值 为 true， 反 之 为 false 

se 当 两 个 操作 数 的 值 至 少 有 一 个 为 true 时 ， 逻 辑 或 运算 符 运算 
返回 的 值 为 rue。 当 两 个 操作 数 的 值 全 部 为 false 时 ， 逻 辑 或 运算 符 运 算 返 回 的 值 为 
false 


该 运算 符 是 一 元 运算 符 ， 其 位 置 在 操作 数 前 面 。 运 算 时 对 操作 数 的 布尔 值 取 反 ， 即 当 操 
作 数 值 false 时 ， 逻 辑 运 算 符 运算 返回 的 值 为 rue， 反 之 为 false 
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》 6.， 条 件 运算 符 
JavaScript 中 为 了 便于 程序 编写 ， 另 外 还 提供 了 条 件 运算 符 “?:”。 它 是 JavaScript 中 唯一 的 
三 元 运算 符 ， 编 写 使 用 “?” 和 “:” 连 接 3 个 操作 数 。 条 件 运 算 符 的 编写 格式 如 下 。 


表达 式 1? 表达 式 2 : 表达 式 3 


“表达 式 1” 返 回 值 为 布尔 值 ( 或 被 转换 为 布尔 值 ) ， 当 “表达 式 1” 的 值 为 true 时 ， 条 件 运算 
符 返回 “表达 式 2” 的 值 ; 当 “ 表 达 式 1” 的 值 为 false 时 ， 条 件 运算 符 返 回 “ 表 达 式 3” 的 值 。 


使 用 JavaScript 中 的 算术 运算 符 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 14 章 \14-1-3.html 。 视频 : 光盘 \ 视 频 \ 第 14 章 \14-1-3.mp4 


[GE 新 建 HTML 页 面 ， 将 页 面 保存 为 “光盘 \ 源 文件 \ 第 14 章 \14-1-3.html”， 如 图 14-1 所 
示 。 转 换 到 代码 视图 中 ， 在 <head> 与 </head> 标签 之 间 加 入 JavaScript 程序 代码 ， 定 义 变量 并 
为 变量 赋值 ， 如 图 14-2 所 示 。 





<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 使 用 Javascript 中 的 算术 运算 符 </title> 
<script type="text/javascript"> 
Var xl=5; 
Var x2=8; 
Var num; 
</script> 
</head> 














图 14-1 图 14-2 


国 到 ”在 <body> 与 </body> 标签 之 间 添 加 JavaScript 程序 代码 ， 对 变量 进行 简单 运算 并 输出 结 
果 ， 如 图 14-3 所 示 。 保存 页 面 ， 在 浏览 器 中 预览 该 页 面 ， 可 以 看 到 程序 输出 结果 ， 如 图 14-4 所 示 。 


<body> 
<script type="text/javascript"> 

num=x1+x23 

document .write(xl1+" 和 "+x2+" 相 加 的 值 为 : "+num+"<br>"); 
num=x1-x23 

document .write(x1+" 和 "+x2+" 相 减 的 值 为 : "+num+"<br>"); 
num=xlzx23 

document .write(xl1+" 和 "+x2+" 相 剩 的 值 为 : "+num+"<br>"); 3 和 8 相 除 的 值 为 。0.625 
num=x1/x23 5 和 8 取 余 数 的 值 为 ，5 
document .write(x1+"0"+x2+" 好 作 的 信 为 : "+num+"<br />"); 
NUm=X1%x2; 

document .write(x1+" 和 "+x2+" 取 余数 的 什 为 : "tnum+"<br>"); 
</script> 

</body> 








5 和 8 相 加 的 值 为 ，13 
3 和 8 相 诚 的 值 为 ，-3 
5 和 8 相 利 的 值 为 ，40 

















图 14-3 图 14-4 


JavaScript 中 提供 了 多 种 用 于 程序 流程 控制 的 语句 ， 这 些 语句 可 以 分 为 条 件 和 循环 两 大 类 。 条 
件 语句 包括 半 、switch 等 ， 循 环 语句 包括 while、for 等 。 
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》1. if 条 件 语句 

if 条 件 语句 在 执行 程序 的 时 候 ， 条 件 分 支 语 句 可 以 完成 程序 不 同 执行 路 线 的 判断 选择 ， 选 择 的 依 
据 则 取决 于 条 件 表达 式 的 值 ( 布尔 值 )。 

if 语 句 常用 于 某 种 条 件 在 两 种 或 三 种 情况 下 的 判断 ，if 条 件 语句 在 某 种 条 件 有 两 种 情况 时 的 编写 格 
式 如 下 。 


if ( 条 件 表达 式 ) { 
代码 段 1 

}elsef 
代码 段 2} 


条 件 语句 首先 对 括号 内 的 条 件 表达 式 的 值 进行 判断 ， 如 果 条 件 表达 式 的 值 为 true， 则 程序 将 执行 
“代码 段 1”, 否则 程序 将 跳 过 “代码 段 1”， 直 接 执行 “代码 段 2”。 在 有 两 个 条 件 表达 的 情况 下 ， 
if 条 件 语句 的 编写 格式 如 下 。 


if ( 条 件 表达 式 1) { 
代码 段 1 

}else if ( 条 件 表达 式 2){ 
代码 段 2 

}elsef 
代码 段 3 


通过 if( 如 果 ) 和 else( 否则 ) 的 组 合 可 以 对 多 个 条 件 进行 判断 ， 以 选择 不 同 的 
国 程序 执行 路 线 。 根 据 所 设立 的 条 件 不 同 ， 程 序 将 执行 不 同 的 代码 ， 在 网 页 中 可 用 于 
判断 不 同情 况 下 网 页 产生 的 不 同行 为 。 
》2.，switch 条 件 语句 
Switch 语句 比 起 if 语句 更 为 工整 ， 条 理 也 更 为 清晰 ， 在 编写 代码 的 过 程 中 不 易 出 错 ， 它 的 编写 
格式 如 下 。 


switch ( 条 件 表达 式 ) { 
case 值 2 
代码 段 1; 
break; 
case 值 这 全 
代码 段 2 


break; 


default: 代码 段 n; 
} 





Switch 语句 的 执行 过 程 其 实 并 不 复杂 , 同样 是 判断 条 件 表达 式 中 的 值 , 如 果 条 件 表达 式 的 值 为 1， 
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则 程序 将 执行 “代码 段 1”，break 代表 其 他 语句 全 部 跳 过 ， 以 此 类 推 。 最 后 有 一 个 default 的 情况 ， 
类 似 于 else， 即 条 件 表达 式 和 以 上 值 都 不 相等 ， 则 程序 将 执行 “代码 段 n”。 
》3. for 和 for…in 循环 语句 

JavaScript 中 的 for 循环 语句 结构 清晰 、 循 环 结构 完整 。for 循环 有 一 个 初始 化 的 变量 做 计算 器 ， 
每 循环 一 次 计数 器 自 增 1( 或 自 减 1)， 并 且 设 立 一 个 终止 循环 的 条 件 表达 式 。 而 初始 化 、 检 测 循 环 条 
件 和 更 新 是 对 计数 器 变量 的 3 个 重要 操作 ，for 循环 将 这 3 个 操作 作为 语法 声明 的 一 部 分 。for 循环 
语句 的 编写 格式 如 下 。 


for ( 初始 化 变量 ; 设立 终止 循环 条 件 表达 式 ; 更 新 变量 ) { 
代码 段 
} 


for 循环 语句 的 编写 可 以 避免 忘记 更 新 变量 ( 自 增 或 自 减 ) 等 情况 , 表达 更 加 明白 , 也 更 容易 理解 。 
JavaScript 中 还 有 另外 一 种 for 循环 ， 即 for…in 循环 ， 用 于 处 理 JavaScript 对 象 ， 如 对 象 的 
属性 等 。for…in 循环 语句 的 编写 格式 如 下 。 


for ( 声明 变量 in 对 象 ) { 
代码 段 
} 


声明 的 变量 用 于 存储 循环 运行 时 对 象 中 的 下 一 个 元 素 。for…in 的 执行 过 程 即 对 对 象 中 每 一 个 元 
素 执行 代码 段 的 语句 。 
》4. while 和 do…while 循环 语句 

while 循环 在 执行 循环 体 前 测试 一 个 条 件 ， 如 果 条 件 成 立 则 进入 循环 体 ; 反之 ， 则 会 跳 到 循环 体 
后 的 第 一 条 语句 。while 循环 语句 的 编写 格式 如 下 。 


while ( 条 件 表达 式 ) { 
代码 段 
1 


while 循环 语句 在 工作 时 ， 首 先 判断 条 件 表达 式 的 值 ， 如 果 值 为 rue， 程 序 将 执行 一 次 代码 段 的 
语句 ， 然 后 再 次 判断 条 件 表达 式 。 如 果 值 为 false， 则 跳 过 循环 语句 ， 执 行 后 面 的 语句 。 

do…while 循环 语句 和 while 循环 语句 非常 相似 ， 只 是 将 条 件 表达 式 的 判断 放 在 了 后 面 。do… 
while 循环 语句 的 编写 格式 如 下 。 


dof 
代码 段 
} while ( 条 件 表达 式 ) ; 


do…while 循环 语句 先 执行 一 次 代码 段 ， 然 后 再 判断 条 件 表达 式 的 值 是 否 为 true。 如 果 表 达 式 的 
值 为 true， 则 继续 循环 执行 代码 段 ; 反之 ， 则 跳出 循环 ， 执 行 后 面 的 语句 。 


使 用 JavaScript 中 的 放 条 件 语句 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 14 章 \14-1-4.html 视频: 光盘 \ 视 频 \ 第 14 章 \14-1-4.mp4 
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UI 新 建 HTML 页 面 ， 将 页 面 保存 为 “光盘 \ 源 文件 \ 第 14 章 \14-1-4.html”， 如 图 14-5 所 
示 。 转 换 到 代码 视图 中 , 在 <body> 与 </body> 标签 中 输入 JavaScript 程序 代码 ， 如 图 14-6 所 示 。 





<body> 
<script type="text/javascript"> 
var words=prompt(" 请 输入 您 最 喜欢 的 友 物 ,只 能 填 小 狗 和 小 猫 "， 
if(words==" 小 狗 "){ 

document .write(n 小 li 我 也 喜欢 小 狗 ! ") ; 
Jelse if (words=="” 小 猫 " 

document.write(" "六 和 i， 也 是 很 不 错 的 小 动物 ! "); 
jetsef 

document .write(" 这 两 个 都 不 喜欢 ， 那 你 喜欢 的 是 什么 ? ") ; 
} 
</script> 


</body> 
图 14-5 图 14-6 
[E@E ”保存 页 面 , 在 浏览 器 中 预览 该 页 面 , 效果 如 图 14-7 所 示 。 在 文本 框 中 输入 提示 文字 “小 狗 ”， 


单 击 “确定 ”按钮 ， 可 以 看 到 页 面 效果 ， 如 图 14-8 所 示 。 如 果 在 文本 框 中 输入 “小 狗 ” 和 “小 猫 ” 
以 外 的 内 容 ， 单 击 “ 确 定 ” 按 钮 ， 可 以 看 到 页 面 效 果 ， 如 图 14-9 所 示 。 





























相合: re pro 
EE 
plorer 用 未 这 两 个 都 不 豆 欢 ， 那 你 语 欢 的 是 什么 ? 


Wm 
A | 
































100% ~ 


图 14-7 图 14-8 图 14-9 


JavaScript 中 的 函数 是 可 以 完成 某 种 特定 功能 的 一 系列 代码 的 集合 ， 在 函数 被 调用 前 函数 体内 
的 代码 并 不 执行 ， 即 独立 于 主 程序 。 函 数 的 代码 执行 结果 不 一 定 是 一 成 不 变 的 ， 可 以 通过 向 函数 传 函 
数 ， 用 来 解决 不 同情 况 下 的 问题 ， 函 数 也 可 以 返回 一 个 值 。 
》1. 使 用 函数 

JavaScript 中 的 函数 与 其 他 的 语言 并 不 相同 ， 每 个 函数 都 是 作为 一 个 对 象 被 维护 和 运行 的 。 通 
过 函数 对 象 的 性 质 ， 可 以 极其 方便 地 将 一 个 赋值 给 一 个 变量 或 者 将 函数 作为 参数 传递 。 函 数 的 定义 语 
法 有 多 种 ， 分 别 介绍 如 下 。 


function funcI(…-){…} 
Var func2=function(…){…}7 
Var func3=function func4(…){…]7 


Var func5=new Function(); 


可 以 用 function 关键 字 定义 一 个 函数 ， 并 为 每 个 函数 指定 一 个 函数 名 ， 通 过 函数 名 来 进行 调用 。 
在 JavaScript 解释 执行 和 时， 函数 都 是 被 维护 为 一 个 对 象 。 
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》 2. 函数 传递 参数 

大 多 数 的 JavaScript 内 置 函 数 在 使 用 时 ， 几 乎 都 需要 传递 参数 ， 如 window 对 象 的 alert() 方法 
和 confirm() 方法 等 。 而 自 定义 函数 同样 可 以 传递 参数 ， 而 且 个 数 不 限 ， 定 义 函 数 时 所 声明 的 参数 叫 
作 形 式 参 数 ， 定 义 函 数 的 语法 如 下 。 


Eunction (XvY…)T 


代码 段 ( 形式 参数 参与 代码 运算 ) 
} 


x 和 y 为 函数 的 形式 参数 ， 在 函数 体内 参与 代码 的 运算 ， 而 实际 调用 函数 时 需 传递 相应 的 数据 给 
》 3. 函数 的 返回 值 

函数 不 仅 可 以 执行 代码 段 ， 其 本 身 还 将 返回 一 个 值 给 调用 的 程序 ， 类 似 于 表达 式 的 计算 。 函 数 返 
回 值 需要 使 用 return 语句 ， 该 语句 将 终止 函数 的 执行 ， 并 返回 指定 表达 式 的 值 。return 语句 的 表现 
方法 如 下 。 


return; 


return 表达 式 ; 


第 一 条 return 语句 类 似 于 系统 自动 添加 的 情况 ， 返 回 值 为 undefined， 不 推荐 使 用 。 第 二 条 
return 语句 将 返回 表达 式 的 值 给 程序 。 


使 用 JavaScript 中 的 函数 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 14 章 \14-1-5.html 视频: 光盘 \ 视 频 \ 第 14 章 \14-1-5.mp4 


[GE 新 建 一 个 HTML 页 面 ， 将 新 建 的 页 面 保存 为 “光盘 \ 源 文件 \ 第 14 章 \14-1-5.html”， 如 
14-10 所 示 。 转 换 到 代码 视图 中 ， 在 <head> 与 </head> 标签 之 间 添 加 相应 的 JavaScript 程序 
代码 ， 如 图 14-11 所 示 。 





<head> 
<meta charset="utf-8"> 
<tittLe> 使 用 Javascript 中 的 函数 </titte> 
<script type="text/javascript"> 
function funReturn(){ 
Var a=10; 
var b=Math.sqrt(a); 
return b/2+a; 
} 
function funReturn2(){ 
Var a=10; 
var b=Math.sqrt(a); 
var c=b/2+a; 
} 
</script> 
</head> 














图 14-10 图 14-11 


国 轴 ”在 <body> 与 </body> 标签 之 间 输入 相应 的 JavaScript 程序 代码 ， 如 图 14-12 所 示 。 完 
成 网 页 程序 代码 的 制作 ， 在 浏览 器 中 预览 该 页 面 ， 可 以 看 到 输出 的 结果 ， 如 图 14-13 所 示 。 
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第 一 个 函数 的 返回 值 为 ，11.581138830084189 
第 二 个 函数 的 返回 值 为 ，undefined 











<body> 

<script type="text/javascript"> 

document .write( "第 一 个 东 数 的 返回 值 为 : "+funReturn()); 
document .write(" <hr> 第 二 个 函数 的 返回 值 为 : "+funReturn2()); 











</script> 
</body> 
图 14-12 图 14-13 
其 实 所 有 的 函数 都 有 返回 值 ， 当 函数 体内 没有 return 语句 时 ，JavaScript 解释 
器 将 在 末尾 加 一 条 return 语句 ， 返 回 值 为 undefined。 


事件 是 交互 的 桥梁 ， 用 户 可 以 通过 多 种 方式 与 浏览 器 载 入 的 页 面 进行 交互 。Web 应 用 程序 开发 
者 通过 JavaScript 脚本 内 置 的 和 自 定义 的 事件 来 响应 用 户 的 动作 ， 就 可 以 开发 出 更 有 交互 性 和 动态 
性 的 页 面 。 
》1.JavaScript 事件 处 理 

在 通常 情况 下 ， 用 户 在 操作 页 面 元 素 时 和 网 页 载 入 后 都 会 发 生 很 多 事件 ， 触 发 事件 后 执行 一 定 的 
程序 就 是 JavaScript 事件 响应 编程 时 的 常用 模式 。 只 有 触发 事件 才 执行 的 程序 被 称 为 事件 处 理 程序 ， 
一 般 调 用 自 定 义 函 数 实现 。 编 写 格式 如 下 。 


<HTML 标签 事件 属性 =" 事件 处 理 程序 "> 


这 种 编写 方式 避免 了 程序 与 HTML 代码 混合 编写 ， 有 利于 维护 。 事 件 处 理 程序 一 般 是 调用 自 定 
义 函 数 ， 函 数 是 可 以 传递 很 多 参数 的 ， 最 常用 的 方法 是 传递 this 函数 ，this 代表 HTML 标签 的 相应 
对 象 。 编 写 格式 如 下 。 


<form action="" method="post" onsubmit="return chk (this); "></form> 


this 参数 代表 form 对 象 ， 在 chk 函数 中 可 以 更 方便 地 引用 form 对 象 及 内 含 的 其 他 控件 对 象 。 
编写 事件 处 理 程序 要 特别 使 用 ， 当 外 部 使 用 双 引 号 时 ， 内 部 要 使 用 单 引 号 ， 反 之 一 样 。 
》 2. 常用 事件 

文档 对 象 模型 即 Document Object Model， 简 称 DOM 。 事 件 的 使 用 使 JavaScript 程序 变 得 
十 分 灵活 ， 这 种 事件 是 异步 事件 ， 即 HTML 元 素 的 事件 属性 和 HTML 其 他 属性 相同 ， 大 小 写 不 敏感 ， 
读者 可 同样 小 写 。 但 是 ， 在 JavaScript 程序 中 使 用 事件 是 需 注意 大 小 写 。HTML 元 素 大 多 数 事件 属 
性 是 一 致 的 ， 其 常用 事件 如 表 14-3 所 示 。 
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表 14-3 常用 事件 
说 明 
no 失去 键盘 焦点 事件 ， 适 用 于 网 页 中 几乎 所 有 可 视 元 素 
[CnGciS 获得 键盘 焦点 事件 ， 适 用 于 网 页 中 几乎 所 有 可 视 元 素 
[Cnehnange 修改 内 容 并 失去 焦点 后 触发 的 事件 ,一般 用 于 网 页 中 可 视 表 单元 素 
[CAGICAUULLLL LU 鼠标 单 击 事件 ， 一 般 用 于 单 击 网 页 中 某 个 元 素 

而 ER 最 标 双击 事件 ， 一 般 用 于 双击 网 页 中 某 个 元 素 

[Cnaragdrop ”用户 在 窗口 中 拖 奥 并 放下 一 个 对 象 时 触发 的 事件 
[Ganon 上 由 本 发 生 湛 误 事件 

[GREY 键盘 按键 按 下 事件 ， 一 般 用 于 按 下 键盘 上 某 个 按钮 触发 

[CR LU 键盘 按键 按 下 并 松 开 时 触发 的 事件 

而 本 可 载 入 事件 ,一般 用 于 <body>、<frameset> 和 <img> 标签 
[GAUnioaol | 关闭 或 重 置 触发 事件 ， 一 般 用 于 <body>、<frameset> 标签 
[GoUScoU 鼠标 滑 出 事件 ， 一 般 用 于 鼠标 移 开 网 页 中 某 个 元 素 
mga 鼠标 经 过 事件 ， 一 般 用 于 鼠标 经 过 网 页 中 某 个 元 素 
[Cnmove 浏览 露 窗口 移动 事件 ， 移 动 浏览 器 窗口 触发 
i 到 时 浏览 器 窗口 改变 大 小 事件 ， 改 变 浏览 器 窗口 大 小 触发 
[CnsUbmit 表单 提交 事件 ， 单 击 提交 表单 按钮 触发 

[Cnresel | 表单 重 置 事件 ， 单 击 重 置 表单 按钮 触发 

[CnSelccU 选中 了 某 个 表单 元 素 时 触发 的 事件 


》 3. 常用 事件 方法 

之 前 操作 的 JavaScript 事件 都 是 由 用 户 操作 所 触发 ， 其 实在 JavaScript 中 ， 还 可 以 用 代码 触发 
部 分 事件 。 例 如 代码 中 执行 blur() 方法 ， 将 使 相应 对 象 失去 键盘 输入 焦点 ， 并 触发 onblur 事件 。 这 
种 代码 触发 事件 的 编程 方式 方便 了 网 页 中 互动 程序 的 制作 ， 让 网 页 更 加 入 性 化 。 常 用 的 事件 方法 如 
表 14-4 所 示 。 









表 14-4 常用 事件 方法 


| 
[CiCKO 该 事件 方法 的 作用 是 模拟 单 击 事件 


说 了 明 


[GAUAO 该 事件 方法 的 作用 是 对 象 将 自动 失去 键盘 输入 焦点 
[GAU 该 事件 方法 的 作用 是 对 象 将 自动 得 到 键盘 输入 焦点 
[SU 该 事件 方法 的 作用 是 复位 表单 数据 

[SritJ | 该 事件 方法 的 作用 是 提交 表单 ， 并 不 触发 onsubmit 事件 
56ledi 该 事件 方法 的 作用 是 选中 表单 控件 





使 用 JavaScript 中 的 onLoad 事件 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 14 章 \14-1-6.html 。 视频 : 光盘 \ 视 频 \ 第 14 章 \14-1-6.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 14 章 \14-1-6.html”， 可 以 看 到 页 面 效 果 ， 如 图 14-14 所 
示 。 转 换 到 代码 视图 中 ， 在 页 面 中 的 <head> 与 </head> 标签 之 间 添 加 JavaScript 程序 代码 ， 如 
14-15 所 示 。 
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日 | <head> 

<meta charset="utf-8"> 

<title> 使 用 JavaScript 中 的 onLoad 事 件 </title> 
<link href="style/14-1-6.css" rel= 
"stylesheet" type="text/css"> 

script type="text/Iavascript"y 


function MM_popupMsg(msg) { 
alert (msg); 

















图 14-14 图 14-15 


本 ”在 页 面 的 <body> 标签 中 添加 load 事件 ， 触 发 自 定义 函数 并 传递 参数 ， 如 图 14-16 所 示 。 
保存 页 面 ， 在 浏览 器 中 预览 页 面 ， 当 页 面 载 入 完成 时 可 以 看 到 load 事件 的 效果 ， 如 图 14-17 所 示 。 





<body onLoad="MM_popupMsg(' 欢 迎 访 问 我 们 的 网 站 ')"> 
<div 10="box cing src="images/141601. jpe" at="" 
J></div> 

<div id="menu"> 网 站 首页 <span> | </span> 立 体 展示 <span>| 
</span> 网 站 店铺 <span style="margin-left: 89px; 
margin-right: 89pxi"></span> 相 关 配件 cspan>|</span> 
单车 知识 <span> | </span> 联 系 我 们 </div> 

<div id="logo"><img src="images/141662.png" width= 
"146" height="141" alt="" /></div> 

</body> 














图 14-16 


jQuery 是 一 套 开放 原始 代码 的 JavaScript 函数 库 , 可 以 说 是 目前 最 受 欢迎 的 JavaScript 函数 库 ， 
最 让 人 津津 乐 道 的 就 是 它 简化 了 DOM 文件 的 操作 ， 让 我 们 可 以 轻松 选择 对 象 ， 并 以 简洁 的 程序 完成 
想 做 的 事情 。 除 此 之 外 ， 还 可 以 通过 jQuery 指定 CSS 属性 值 ， 达 到 想 要 的 特效 与 动画 效果 。 另 外 ， 
jQuery 还 强化 异步 传输 以 及 事件 功能 ， 轻 松 访问 远程 数据 。 


jQuery 是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 函数 库 ， 它 兼容 CSS 3， 还 兼容 各 种 
浏览 器 ， jQuery 2.0 及 后 续 版 本 不 再 支持 IE8 以 下 版 本 浏览 器 。jQuery 使 用 户 能 更 方便 地 处 理 
HTML、events 和 实现 动画 效果 ， 并 且 方 便 地 为 网 站 提供 AJAX 交互 。jQuery 还 有 一 个 比较 大 的 优 
势 是 ， 它 的 文档 说 明 很 全 ， 而 且 各 种 应 用 也 说 得 很 详细 ， 同 时 还 有 许多 成 熟 的 插件 可 供 选择 。jQuery 
能 够 使 用 户 的 HTML 页 面 保持 代码 和 HTML 内 容 分 离 ， 也 就 是 说 ， 不 需要 在 HTML 代码 中 插入 一 
扒 的 JavaScript 代码 来 调用 命令 了 ， 只 需要 定义 id 名 称 即 可 。 

jQuery 是 一 个 兼容 多 浏览 器 的 JavaScript 库 ， 核 心理 念 是 “ 写 得 更 少 ， 做 得 更 多 ”。jQuery 
是 免费 的 、 开 源 的 ， 使 用 MIT 许可 协议 。jQuery 的 语法 设计 可 以 使 开发 者 更 加 便捷 ， 例 如 操作 文档 
对 象 、 选 择 DOM 元 素 、 制 作 动画 效果 、 事 件 处 理 、 使 用 AJAX 以 及 其 他 功能 。 除 此 之 外 ，jQuery 
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提供 API 让 开发 者 编写 插件 。 其 模块 化 的 使 用 方式 使 开发 者 可 以 很 轻松 地 开发 出 功能 强大 的 静态 或 动 
态 网 页 。 


在 网 页 中 引用 jQuery 函数 库 的 方法 有 两 种 ， 一 种 是 直接 下 载 JavaScript 文件 引用 ， 另 一 种 是 
使 用 CDN(Content Delivery Network) 来 加 载 链接 库 。 
》1. 下 载 jQuery 函数 库 

jQuery 的 官方 网 址 是 http://jquery.com，jQuery 的 版 本 为 V2.1.4， 如 图 14-18 所 示 。 单 
击 页 面 中 的 Download jQuery 按钮 ， 进 入 jQuery 下 载 页 面 ， 网 页 中 两 种 格式 可 以 下 载 ， 一 种 是 
Download the compressed, production jQuery 2.1.4, 即 程序 代码 已 经 压缩 过 的 版 本 ,文件 比较 小 ， 
下 载 后 的 文件 名 为 jquery-2.1.4.min.js; 另 一 种 是 Download the uncompressed, development 
jQuery 2.1.4， 即 程序 代码 未 压缩 的 开发 版 本 ， 文 件 比较 大 ， 适 合 程序 开发 人 员 使 用 ， 下 载 后 的 文件 
名 为 jquery-2.1.4.js， 如 图 14-19 所 示 。 

















图 14-18 图 14-19 


下 载 完成 后 ， 就 可 以 在 网 页 中 链接 刚刚 下 载 的 jQuery 函数 库 文件 了 ， 链 接 方 法 与 链接 外 部 
JavaScript 脚本 文件 相同 ， 在 <head> 与 </head> 标签 之 间 通 过 <script> 标签 进行 链接 ， 代 码 
如 下 。 


<script type="text/javascript" src="jQuery 库 文件 路 径 "></script> 


》2. 使 用 CDN 加 载 jQuery 库 函 数 
CDN(Content Delivery Network) 是 内 容 分 发 服务 网 络 ， 也 就 是 将 要 加 载 的 内 容 通过 这 个 网 络 
系统 进行 分 发 。 浏 览 者 在 浏览 到 你 的 网 页 之 前 可 能 已 经 在 同一 个 CDN 下 载 过 jQuery， 浏 览 器 已 经 
缓存 过 这 个 文件 ， 此 时 就 不 需要 再 重新 下 载 ， 浏览 速度 会 快 很 多 。Google、 微 软 等 都 提供 CDN 服务 。 
如 果 需 要 使 用 CDN 加 载 jQuery 库 函 数 ， 只 需要 将 网 址 加 入 到 HTML 页 面 的 <head> 与 </head> 
标签 之 间 即 可 ， 代 码 如 下 。 


<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min. 


js"></script> 
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提示 jQuery V2 .x 之 后 的 版 本 不 再 支持 TE6、IE7 和 IE8， 如 果 考 虑 到 用 户 使 用 的 是 版 本 较 
低 的 浏览 器 ， 建 议 下 载 或 使 用 cDN 加 载 V1 . 10 . 2 版 本 的 jQuery 函数 库 。 


jQuery 必须 等 浏览 器 加 载 HTML 的 DOM 对 象 之 后 才能 执行 ， 可 以 通过 .ready() 方法 来 确认 
DOM 对 象 是 否 已 经 全 部 加 载 ， 代 码 如 下 所 示 。 


jQuery (document) .ready (function() { 
// 程序 代码 
Ds 


上 述 jQuery 程序 代码 由 “jQuery” 开 始 ， 也 可 以 使 用 “$” 代 蔡 ， 代 码 如 下 所 示 。 


$ (document) .ready (function() { 
// 程序 代码 
ys 


$() 函数 括号 内 的 参数 是 指定 想 要 选用 哪 一 个 对 象 ， 接 着 是 想 要 jQuery 执行 什么 方法 或 者 处 理 
什么 事件 ， 例 如 ready() 方法 。ready() 方法 括号 内 是 事件 处 理 的 函数 程序 代码 ， 多 数 情况 下 ， 会 把 
事件 处 理 函 数 定义 为 匿名 函数 ， 也 就 是 上 述 程序 代码 中 的 function()f。 


由 于 document ready 是 很 常用 的 方法 ，jQuery 提供 了 简洁 的 写法 便于 用 户 使 用 ， 简 洁 的 代码 
写法 如 下 所 示 。 


$ (function() { 
// 程序 代码 
DD); 


jQuery 的 使 用 方法 非常 简单 ， 只 需要 指定 作用 的 DOM 对 象 及 执行 什么 样 的 操作 即 可 ， 其 基本 
语法 如 下 。 


$ ( 选择 器 ) . 操作 () ; 


例如 ， 若 需要 将 HTML 页 面 中 所 有 的 <p> 标签 中 的 对 象 全 部 隐藏 ， 代 码 可 以 写 为 如 下 的 形式 。 


$("p") .hide () 


jQuery 选择 器 用 来 选择 HTML 中 的 元 素 ， 可 以 通过 HTML 标签 名 称 、id 属性 以 及 class 属性 
等 来 选择 网 页 中 的 元 素 。 
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》1. 标签 名 称 选择 器 
标签 名 称 选择 器 顾名思义 是 直接 使 用 HTML 标签 ， 例 如 想 要 选择 HTML 页 面 中 的 所 有 <div> 标 
签 ， 可 以 写 为 如 下 的 形式 。 


$ ("div") 


了 》2. id 选择 器 (#) 
id 选择 器 通过 元 素 的 id 属性 来 选择 对 象 ， 只 要 在 id 属性 前 如 上 “# ” 即 可 。 例 如 想 要 选择 
HTML 页 面 中 id 属性 为 box 的 对 象 ， 可 以 写 为 如 下 的 形式 。 


$("#box") 


注意 ， 在 一 个 HTML 页 面 中 元 素 的 id 属性 名 称 不 能 重复 ， 所 以 id 选择 器 适用 
于 找 出 HTML 页 面 中 唯一 的 对 象 。 





》3.，class 选择 器 (.) 
Class 选择 器 通过 元 素 的 class 属性 来 获取 对 象 ， 只 需要 在 class 属性 前 如 上 “.” 即 可 。 例 如 想 
要 选择 HTML 页 面 中 class 属性 为 font01 的 对 象 ， 可 以 写 为 如 下 的 形式 。 


$(".font01") 


还 可 以 将 上 述 3 种 选择 器 组 合 使 用 ， 例 如 需要 选择 HTML 页 面 中 所 有 <p> 标签 中 class 属性 为 
font01 的 对 象 ， 可 以 写 为 如 下 的 形式 。 


S$("p.font0l") 
如 表 14-5 所 示 ， 列 出 了 常用 的 选择 以 及 搜索 方法 ， 供 读者 参考 。 


表 14-5 常用 的 选择 和 搜索 方法 
说 了 明 





法 
选择 HTML 页 面 中 的 所 有 元 素 

区 古寺 选 择 HTML 页 面 中 当前 正在 作用 中 的 元 素 

EB 本寺 择 HTML 页 面 中 第 一 个 <p> 元 素 

[re 本 选择 HTML 页 面 中 包含 href 属性 的 元 素 

[even 本 | 选择 HTML 页 面 中 偶数 <tr> 元 素 
[SOddl 选择 HTML 页 面 中 奇数 <tr> 元 素 
NP 选择 HTML 页 面 <div> 标签 中 所 包含 的 <p> 元 素 
[SOTinol pi 在 HTML 页 面 中 搜索 <div> 标签 中 所 包含 的 <p> 元 素 
av rex 中 在 HTML 页 面 中 搜索 <div> 标签 之 后 的 第 一 个 <p> 元 素 


在 HTML 页 面 中 搜索 第 3 个 <li> 元 素 。 在 eq() 中 输入 元 素 的 位 置 ， 只 能 输入 整数 ， 
最 小 值 为 0 


@342 





掌握 了 jQuery 选择 器 的 用 法 之 后 ， 除 了 可 以 操控 HTML 元 素 之 外 ， 还 可 以 使 用 css() 方法 来 改 
变 网 页 元 素 的 CSS 样式 。 例 如 ， 设 置 HTML 页 面 中 所 有 <p> 元 素 的 文字 颜色 为 红色 ， 可 以 写 为 如 
下 的 代码 。 


SSEESS COLOREed ys 


使 用 jQuery 改变 列表 第 一 行 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 14 章 \14-2-5.html 。 视频 : 光盘 \ 视 频 \ 第 14 章 \14-2-5.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 14 章 \14-2-5.html”， 效 果 如 图 14-20 所 示 。 转 换 到 
HTML 代码 中 , 在 <head> 与 </head> 标签 之 间 加 入 链接 jQuery 函数 库 文件 代码 , 如 图 14-21 所 示 。 


<1doctype htnl> 
<html> 





<head> 
‘<meta er 
Ht 





tyle/14-5-2,c33" rele"stylesheet! cyper"text/cssr> 
3 type="text/ pe pt" src="js/jquery-2.1.4.min.js"></script> 





zhea 






人 
和 全 Ai 
: 当 战 队 的 淮 受 损 时 我 们 该 怎么 办 9 </1i> 











图 14-20 图 14-21 


葬 出 ”在 <head> 与 </head> 标 签 之 间 添加 相应 的 jQuery 脚本 代码 , 如 图 14-22 所 示 。 保存 页 面 ， 
在 浏览 器 中 预览 页 面 , 可 以 看 到 页 面 中 列表 第 一 行 的 项 目 列表 文字 被 修改 为 红色 , 如 图 14-23 所 示 。 





[et 


SI rr A 
IE 


<head> 

<meta charset="utf-8"> 

<title> 使 用 jQuery 改变 列表 第 一 行 效果 </title> 

<Link href="style/14-5-2.css" rel="stylesheet" 
type="text/css"> 

Sor ok type="text/javascript" src= 


<script type="text/javascript"> 
s$(function() { 
$("1Li").eq(0).css("color", "#Fe0"); 

















图 14-22 图 14-23 


jQuery 语法 与 Javascript 语法 一 样 并 不 限制 使 用 单 引号 还 是 双 引 号 ， 但 是 必须 是 成 
对 出 现 的, 例如 "p" 和 'p' 都 是 正确 的 ， 但 "p' 就 是 错误 的 写法 。 
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jQuery Mobile 是 jQuery 在 手机 和 平板 电脑 等 移动 设备 上 应 用 的 版 本 。jQuery Mobile 不 仅 给 
主流 移动 平台 带 来 jQuery Mobile 核心 库 ， 而 且 会 发 布 一 个 完整 、 统 一 的 jQuery 移动 UI 框架 。 


随 着 移动 互联 网 的 快速 发 展 ， 适 用 于 移动 设备 的 网 页 非常 需要 一 个 跨 浏览 器 的 框架 ， 让 开发 人 员 
开发 出 真正 的 移动 Web 网 站 。jQuery Mobile 支持 全 球 主流 的 移动 应 用 平台 。 

目前 ， 网 站 中 的 动态 交互 效果 越 来 越 多 ， 其 中 大 多 数 都 是 通过 jQuery 来 实现 的 。 随 着 智能 手 
机 和 平板 电脑 的 流行 ， 主 流 移动 平面 上 的 浏览 器 功能 已 经 与 传统 的 桌面 浏览 器 功能 相差 无 几 ， 因 此 
jQuery 团队 开发 了 jQuery Mobile。jQuery Mobile 的 使 命 是 向 所 有 主流 移动 设备 浏览 器 提供 一 种 
统一 的 交互 体验 ， 使 整个 互联 网 上 的 内 容 更 加 丰富 。 

jQuery Mobile 是 一 个 基于 HTML 5， 拥 有 响应 式 网 站 特性 ， 兼 容 所 有 主流 移动 设备 平台 的 统一 
UI 接口 系统 与 前 端 开发 框架 ， 可 以 运行 在 所 有 智能 手机 、 平 板 电 脑 和 桌面 设备 上 。 不 需要 为 每 一 个 
移动 设备 或 者 操作 系统 单独 开发 应 用 ， 设 计 者 可 以 通过 jQuery Mobile 框架 设计 一 个 高 度 响应 式 的 网 
站 或 应 用 运行 于 所 有 流行 的 智能 手机 、 平 板 电脑 和 桌面 系统 。 

(1) jQuery Mobile 是 创建 移动 Web 应 用 程序 的 框架 。 

(2) jQuery Mobile 适用 于 所 有 流行 的 智能 手机 和 平板 电脑 。 

(3) jQuery Mobile 使 用 HTML 5 和 CSS 3 通过 尽 可 能 少 的 脚本 对 页 面 进行 布局 。 


jQuery Mobile 是 一 套 以 jQuery 和 jQuery UI 为 基础 ， 提 供 移 动 设备 跨 平台 的 用 户 界 面 函数 库 。 
通过 它 制作 出 来 的 网 页 能 够 支持 大 多 数 移动 设备 的 浏览 器 ， 并 且 在 浏览 网 页 时 ， 能 够 拥有 操作 应 用 软 
件 一 样 的 触 碰 及 滑动 效果 。 

jQuery Mobile 具有 以 下 几 个 特点 。 

e 强大 的 AJAX 驱动 导航 

无 论 页 面 数据 的 调用 还 是 页 面 之 间 的 切换 ， 都 是 采用 AJAX 进行 驱动 的 ， 从 而 保持 了 动画 转换 
页 面 的 干净 与 优雅 。 

e 以 jQuery 和 jQuery UI 为 框架 核心 

jQuery Mobile 的 核心 框架 是 建立 在 jQuery 基础 之 上 的 ， 并 且 利 用 了 jQuery UI 的 代码 与 运用 
模式 ， 使 熟悉 jQuery 语法 的 开发 者 能 通过 最 少量 的 学 习 迅 速 掌 握 。 

e 强大 的 浏览 器 兼容 性 

jQuery Mobile 继承 了 jQuery 的 兼容 性 优势 ， 目 前 所 开发 的 应 用 兼容 于 所 有 主要 的 移动 终端 浏 
览 器 ， 使 开发 人 员 可 以 集中 精力 做 功能 开发 ， 而 不 需要 考虑 复杂 的 浏览 器 兼容 性 问题 。 

。 丰富 的 主题 和 ThemeRoller 工具 

jQuery UI 的 ThemeRoller 在 线 工 具 ， 只 要 通过 下 拉 菜 单 进行 设置 ， 就 能 够 自制 出 相当 有 特色 
的 网 页 风格 ， 并 且 可 以 将 代码 下 载 下 来 应 用 。 另 外 ，jQuery Mobile 还 提供 了 丰富 的 主题 ， 轻 轻松 松 
就 能 够 快速 创建 高 质感 的 网 页 。 

e 支持 触摸 与 其 他 鼠标 事件 

jQuery Mobile 提供 了 一 些 自 定义 的 事件 ， 用 来 侦 测 用 户 的 移动 触摸 动作 ， 如 tap( 单 击 )、tap-- 
and-hold( 单 击 并 按 住 )、swipe( 滑动 ) 等 事件 ， 极 大 提高 了 代码 开发 的 效率 。 
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jQuery Mobile 的 工作 原理 是 : 提供 可 触摸 的 UI 小 部 件 和 AJAX 导航 系统 ， 使 页 面 支持 动画 式 
切换 效果 。 以 页 面 中 的 元 素 标签 为 事件 驱动 对 象 ， 当 触摸 或 单 击 时 进行 触发 ， 最 后 在 移动 终端 的 浏览 
器 中 实现 一 个 个 应 用 程序 的 动画 展示 效果 。 







AJAX 即 Asynchronous JavaScript And XML( 异步 JavaScript 和 XML)， 是 
提示 指 一 种 创建 交互 式 网 页 应 用 的 网 页 开发 技术 。 通 过 在 后 台 与 服务 器 进行 少量 数据 交 
Ue 换 , AJAX 可 以 使 网 页 实现 异步 更 新 。 这 意味 着 可 以 在 不 重新 加 载 整个 网 页 的 情况 下 ， 
对 网 页 的 某 部 分 进行 更 新 。 


jQuery Mobile 的 操作 流程 与 编写 HTML 页 面相 似 ， 编 写 和 开发 jQuery Mobile 页 面 的 工具 也 
与 HTML 页 面 的 工具 相同 , 可 以 通过 记事 本 或 专业 的 Dreamweaver 来 编辑 制作 jQuery Mobile 页 面 ， 
完成 jQuery Mobile 页 面 的 制作 后 ， 将 其 保存 为 .html 或 .htm 文件 ， 就 可 以 在 浏览 器 或 模拟 器 中 浏 
览 了 。jQuery Mobile 的 操作 流程 大 致 有 以 下 几 个 步 又。 

(1) 新 建 HTML 5 页 面 。 

(2) 载 入 jQuery、jQuery Mobile 函数 库 和 jQuery Mobile CSS。 

(3) 使 用 jQuery Mobile 定义 的 HTML 标准 编写 网 页 架构 及 内 容 。 


jQuery Mobile 页 面 主要 用 于 智能 手机 等 移动 设备 浏览 ， 所 以 需要 使 用 能 够 产生 移动 设备 屏幕 大 
小 的 模拟 器 来 预览 所 制作 的 jQuery Mobile 页 面 效果 。 本 节 将 向 读者 介绍 Opera Mobile Emulator 
移动 设备 模拟 器 。 

在 浏览 器 地 址 栏 中 输入 Opera Mobile Emulator 模拟 器 的 下 载 网 址 http://www.opera.com / 
developer/tools/mobile， 打 开 网 站 页 面 ， 如 图 14-24 所 示 。 单 击 页 面 中 的 Opera Mobile Classic 
Emulator 12.1 for Windows 链接 ， 下 载 该 模拟 器 ， 如 图 14-25 所 示 。 
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完成 该 模拟 器 安装 程序 的 下 载 后 进行 安装 ， 完 成 模拟 器 的 安装 后 启动 模拟 器 ， 弹 出 “选择 语言 ” 
对 话 框 ， 在 下 拉 列 表 中 选择 “简体 中 文 ” 选 项 ， 单 击 “ 确 定 ”按钮 ， 如 图 14-26 所 示 。 此 时 将 显示 
软件 界面 ， 可 以 从 中 选择 需要 模拟 的 移动 设备 ， 如 图 14-27 所 示 。 





简体 中 文 
网 启动 时 再 显示 本 对 话 框 
[C 剖 [六 |] 吏 本 |‖ 





图 14-26 图 14-27 


例如 从 “资料 ”列表 框 中 选择 Samsung Galaxy Note， 单 击 “ 启 动 ”按钮 ， 如 图 14-28 所 示 。 
就 会 弹出 手机 模拟 窗口 ， 如 图 14-29 所 示 。 
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图 14-28 图 14-29 


虽然 Opera Mobile Emulator 模拟 器 没有 呈现 真实 的 手机 外 观 ， 但 是 窗口 尺寸 与 手机 屏幕 是 一 
样 的 , 它 的 好 处 是 可 以 任意 调整 窗口 大 小 。 如 果 需 要 浏览 jQuery Mobile 页 面 在 不 同 屏幕 尺寸 的 效果 ， 
这 款 模拟 器 就 非常 方便 。 

如 果 无 法 安装 模拟 器 也 没有 关系 ， 可 以 直接 使 用 现 有 的 浏览 器 来 代替 模拟 器 ， 只 需要 调整 浏览 窗 
口 的 大 小 尺寸 ， 同 样 可 以 预览 jQuery Mobile 页 面 的 运行 结果 。 


要 开发 jQuery Mobile 页 面 ， 必 须要 引用 jQuery Mobile 函数 库 (.js)、CSS 样式 表 (.css) 和 配 
套 的 jQuery 函数 库 文 件 。 引 用 方式 有 两 种 ， 一 种 是 到 jQuery Mobile 官方 网 站 上 下 载 文件 进行 引用 ， 
另 一 种 是 直接 通过 URL 链接 到 jQuery Mobile 的 CDN-hosted 引用 ， 不 需要 下 载 文件 。 

在 浏览 器 窗口 中 打开 jQuery Mobile 官方 网 站 页 面 http://jquerymobile.com/download， 进 入 
网 站 后 找到 Latest Stable Version 字样 ， 官 网 上 直接 提供 引用 代码 ， 如 图 14-30 所 示 。 只 需要 将 
其 复制 并 粘贴 到 HTML 文档 的 <head> 与 </head> 标签 之 间 即 可 。 
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图 14-30 


jQuery Mobile 函数 库 仍然 在 开发 过 程 中 ， 因 此 用 户 看 到 的 版 本 号 可 能 会 与 
本 书 有 所 不 同 ， 请 使 用 官网 提供 的 最 新 版 本 ， 只 需要 将 代码 复制 到 HTML 文档 的 
<head> 与 </head> 标签 之 间 即 可 。 





将 引用 代码 复制 到 HTML 文档 的 <head> 与 </head> 标签 之 间 ， 其 位 置 如 下 所 示 。 


<head> 

<meta charset="utf-8"> 

<title> 创建 jQuery Mobile 页 面 </title> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery. 
mobile-1.4.5.min.css" /> 

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. 
js"></script> 


</head> 


通过 URL 加 载 jQuery Mobile 函数 库 的 方式 使 版 本 的 更 新 更 加 及 时 ， 但 由 于 是 通过 jQuery 
CDN 服务 器 请 求 的 方式 进行 加 载 ， 在 执行 页 面 时 必须 要 保证 网 络 的 畅通 ， 否 则 不 能 实现 jQuery 
Mobile 移动 页 面 的 效果 。 


CDN 的 全 称 是 Content Delivery Network， 用 于 快速 下 载 跨 Internet 常用 的 
文件 ， 只 要 在 页 面 的 <head> 与 </head> 标签 之 间 加 入 引用 代码 ， 同 样 可 以 执行 
jQuery Mobile 移动 应 用 页 面 。 
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与 开发 和 制作 普通 的 网 站 页 面相 似 ， 创 建 一 个 jQuery Mobile 页 面 也 非常 简单 。 在 jQuery Mo- 
bile 页 面 中 通过 <div> 标签 来 组 织 页 面 结构 , 通过 在 标签 中 设置 data-role 属性 来 设置 该 标签 的 作用 。 
每 一 个 设置 了 data-role 属性 的 <div> 标签 就 是 一 个 容器 ， 可 以 在 该 容器 中 放置 其 他 的 页 面 元 素 。 接 
下 来 一 起 来 制作 第 一 个 jQuery Mobile 页 面 。 


第 一 个 jQuery Mobile 页 面 

最 终 文件 : 光盘 \ 最 终 文件 \ 第 14 章 \14-4-3.html 。 视频 : 光盘 \ 视 频 \ 第 14 章 \14-4-3.mp4 
[GE 执行 "文件 > 新 建 " 命 令 , 弹出 “新 建文 档 " 对 话 框 , 新 建 一 个 HTML 5 页 面 (如 图 14-31 所 示 )， 
将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 14 章 \14-4-3.html”。 转 换 到 代码 视图 中 ， 可 以 看 到 该 HTML 
5 文档 的 代码 ， 如 图 14-32 所 示 。 





em 
[ED 
[eT 
而 smsew 


国 mew 


<1doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 





<title> 无 标题 文档 </title> 
</head> 


<body> 
</body> 
</html> 














CO | 








图 14-31 图 14-32 


吓 国 在 <head> 与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 。 


<head> 

<meta charset="utf-8"> 

<title> 第 一 个 jQuery Mobile 页面 </title> 

<meta name="viewport" content="width=device-width,initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery. 
mobile-1.4.5.min.css" /> 

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. 
js"></script> 

</head> 


添加 <meta> 标签 ， 在 该 标签 中 添加 content 属性 ， 设 置 页 面 的 宽度 与 模拟 器 的 宽度 一 致 ， 以 
保证 页 面 可 以 在 浏览 器 中 完全 填充 。 

接 下 来 使 用 URL 方式 加 载 jQuery Mobile 函数 库 文件 ， 注 意 这 3 个 jQuery Mobile 函数 库 文件 
的 加 载 顺 序 。 
[王国 在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 页 面 的 正文 内 容 。 
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<body> 

<div id="pagel" data-role="page"> 
<div data-role="header"> 
<h1> 页 面 标题 </h1> 
</div> 
<div data-role="content"> 
jQuery Mobile 页 面 的 正文 内 容 部 分 
</div> 
<div data-role="footer"> 
<h1> 页 脚 </h1> 
</div> 

</div> 

</body> 


在 <body> 与 </body> 标签 之 间 ， 通 过 多 个 <div> 标签 对 jQuery Mobile 页 面 的 层次 进行 划分 。 
因为 jQuery Mobile 中 每 个 <div> 标签 都 是 一 个 容器 ， 根 据 每 个 <div> 标签 中 所 设置 的 data-role 
属性 值 ， 从 而 确定 该 元 素 的 身份 。 如 设置 data-role 属性 值 为 header， 则 表示 该 <div> 元 素 为 头 部 
区 域 ; 设置 data-role 属性 值 为 content， 则 表示 该 <div> 元 素 为 内 容 区 域 ; 设置 data-role 属性 值 
为 footer， 则 表示 该 <div> 元 素 为 页 脚 区 域 。 


提示 data-role 属性 是 HTML 5 中 新 增 的 属性 ， 通 过 设置 该 属性 ，jQuery Mobile 
页 面 就 可 以 很 快 地 定位 到 指定 的 元 素 ， 并 对 内 容 进行 相应 的 处 理 。 


区 完成 第 一 个 jQuery Mobile 页 面 的 制作 ， 保 存 页 面 ， 打 开 Opera Mobile 模拟 器 ， 直 接 将 所 
制作 的 jQuery Mobile 页 面 文件 拖 入 到 Opera Mobile 模拟 器 中 ， 即 可 看 到 jQuery Mobile 页 面 的 
效果 ， 如 图 14-33 所 示 。 


<div data -role="header" > 
<div id="pagel" data -role="page" > <div data -role=" content "> 


<div data -role=" footer "> 





图 14-33 
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在 jQuery Mobile 页 面 中 ， 如 果 将 页 面 元 素 的 data-role 属性 值 设 置 为 page， 则 该 元 素 成 为 一 
个 容器 ， 即 页 面 中 的 某 块 区 域 。 在 一 个 jQuery Mobile 页 面 中 ， 可 以 设置 多 个 元 素 成 为 容器 ， 虽 然 元 
素 的 data-role 属性 值 都 是 page， 但 是 它们 对 应 的 id 名 称 不 允许 相同 。 
》1. 内 链接 

在 jQuery Mobile 页 面 中 ， 将 一 个 页 面 中 的 多 个 容器 当 作 多 个 不 同 的 页 面 ， 它 们 之 间 的 跳 转 是 通 
过 <a> 标签 来 实现 的 ， 在 <a> 标签 中 设置 href 属性 值 为 # 加 对 应 页 面 的 id 名 称 来 实现 ， 这 种 链接 
形式 也 称 为 内 链接 ， 例 如 下 面 的 链接 形式 。 


<ahref="#pageln> 第 1 页 </a> 


》2. 外 链接 

在 jQuery Mobile 页 面 中 除了 可 以 创建 内 链接 外 ， 还 可 以 创建 外 链接 。 所 谓 外 链接 是 指 通过 单 击 
页 面 中 的 某 个 链接 ， 跳 转 到 另外 一 个 jQuery Mobile 页 面 中 ， 而 不 是 在 同一 个 页 面 中 的 不 同 区 域 之 间 
跳 转 。 其 实现 的 方式 与 内 链接 相似 ， 只 需要 在 <a> 标签 中 添加 rel 属性 设置 ， 设 置 该 属性 的 属性 值 为 
external， 即 可 表示 该 链接 是 一 个 外 链接 ， 例 如 下 面 的 链接 形式 。 


<a href="x.html" rel="external"> 详细 页 面 </a> 


》3. 页 面 跳 转 过 渡 效 果 
在 jQuery Mobile 页 面 中 无 论 是 创建 内 链接 还 是 外 链接 ， 都 支持 页 面 跳 转 过 渡 的 动画 效果 ， 只 需 
要 在 <a> 标签 中 添加 data-transition 属性 设置 ， 格 式 如 下 所 示 。 


<a href=" 链接 地 址 " data-transition="slide | pop | slideup | slidedown | fade 
1 flip"” > 对 象 </a> 


data-transition 属性 的 属性 值 说 明 如 表 14-6 所 示 。 


表 14-6 data-transition 属性 值 说 明 
说 明 
[Sidell il 该 属性 值 为 默认 值 表示 从 右 至 左 的 滑动 动画 效果 
[EGR 表示 以 弹出 的 效果 打开 链接 页 面 


[SGSUDILLL LU 表示 向 上 滑动 的 动画 效果 
[Siaedown 表示 向 下 滑动 的 动画 效果 
[GAU 表示 渐变 退色 的 动画 效果 
机 于 表示 当前 页 面 飞 出 ， 链 接 页 面 飞 入 的 动画 效果 





实现 jQuery Mobile 页 面 中 的 链接 跳 转 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 14 章 \14-4-4.html 。 视频 : 光盘 \ 视 频 \ 第 14 章 \14-4-4.mp4 


[GE 新 建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 14 章 \14-4-4.html”。 在 


<head> 与 </head> 标签 之 间 添 加 <meta> 标签 设置 和 加 载 jQuery Mobile 函数 库 代 码 ， 代 码 如 下 
所 示 。 
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[ 王 王 在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 第 一 个 页 面 。 


葬 思 接着 编写 jQuery Mobile 第 一 个 页 面 代码 。 





<div data-role="content"> 
<p> 第 二 个 页 面 的 正文 内 容 </p> 
<p><a href="#pagel"> 返回 第 1 页 </a></p> 
</div> 
<div data-role="footer"> 
<hl> 页 脚 </h1> 
</div> 
</div> 


<!-- 第 2 个 页 面 结束 --> 





在 jQuery Mobile 页 面 中 , 一 个 页 面 中 有 多 个 page 区 域 ， 在 page 区 域 之 间 的 跳 转 称 为 内 链接 ， 
链接 方式 是 在 <a> 标签 中 设置 href 属性 为 # 加 所 链接 的 page 区 域 的 id 名 称 。 
[ER 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 jQuery Mobile 页 面 ， 效 果 如 图 14-34 所 
示 。 单 击 页 面 中 的 “第 2 页 ”链接 文字 ， 将 跳 转 到 第 2 页 显示 ， 并 显示 链接 跳 转 的 过 渡 动 画 效 果 ， 如 
图 14-35 所 示 。 
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图 14-34 图 14-35 


当前 页 面 中 。 如 果 是 内 链接 ， 则 在 当前 屏幕 中 只 显示 指定 id 名 称 的 区 域 ， 其 他 的 区 


国 当 页 面 进行 跳 转 时 ， 跳 转 前 的 页 面 将 自动 隐藏 ， 链 接 的 区 域 或 页 面 自动 展示 在 
域 都 会 被 隐藏 。 





在 本 章 中 向 读者 介绍 了 JavaScript 和 jQuery 的 相关 基础 知识 ， 使 读者 对 JavaScript 和 jQuery 
有 所 了 解 ， 重 点 介绍 了 jQuery Mobile 的 功能 特点 以 及 操作 流程 等 内 容 ， 使 读者 对 jQuery Mobile 
有 初步 的 认识 和 了 解 ， 并 通过 简单 的 jQuery Mobile 页 面 的 制作 ， 讲 解 了 创建 jQuery Mobile 页 面 
的 方法 ， 为 后 面 学 习 jQuery Mobile 页 面 打下 坚实 的 基础 。 
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bA 
站 本 章 知识 点 
第 15 章 0/ A Ae) .|| -amid vos 人 
页 面 的 基本 架构 以 及 多 容器 


jQuery Mobile 页 面 的 结构 


j Mobil 
和 jQuery Mobile 页 


一 个 页 面 中 的 多 个 容器 。 另 外 ， 在 jQuery Mobile 页 面 中 通 re ee 
er Moblle 
之 间 的 动画 过 渡 效 果 ， 也 可 以 通过 调用 脚本 代码 实现 jQuery 加 全 
Mobile 页 面 的 预 加 载 和 缓存 等 功能 。 在 本 章 中 将 向 读者 介绍 Y 理解 并 掌握 预 加 载 和 缓存 
jQuery Mobile 页 面 的 架构 、 预 载 及 页 面 跳 转 等 功能 。 jQuery Mobile 页 面 的 方法 


掌握 jQuery Mobile 页 面 头 
部 栏 、 导 航 栏 和 尾部 栏 的 设 
置 方法 
掌握 jQuery Mobile 页 面 网 
| 格 布局 的 方法 
MY 掌握 jQuery Mobile 页 面 中 
可 折 赤 区 块 的 创建 和 使 用 方法 








在 上 一 章 中 已 经 了 解 了 jQuery Mobile 页 面 的 工作 原理 和 执行 流程 ,jQuery Mobile 页 面 的 许 
多 功能 效果 都 需要 借助 于 HTML 5 的 新 增 标签 和 属性 ， 因 此 所 创建 的 HTML 页 面 必须 符合 HTML 5 
文档 规范 ， 并 且 在 文档 的 <head> 与 </head> 标签 之 间 需 要 依次 加 载 jQuery Mobile 的 CSS 样式 
表 文 件 、jQuery 基本 框架 文件 和 jQuery Mobile 插件 文件 。 


jQuery Mobile 页 面 拥有 一 个 基本 的 架构 ， 就 是 在 HTML 页 面 中 通过 在 <div> 标签 中 添加 
data-role 属性 ， 设 置 该 属性 的 值 为 page， 使 该 Div 形成 一 个 容器 ， 而 在 该 容器 中 包含 3 个 子 容器 ， 
分 别 在 各 子 容 器 的 <div> 标签 中 设置 data-role 属性 值 分 别 为 header、content、footer， 这 样 就 
形成 了 “标题 ”、“ 内 容 ” 和 “结构 ”3 部 分 组 成 的 标准 页 面 架构 。 
下 面 所 示 的 HTML 代码 就 是 一 个 jQuery Mobile 页 面 的 基本 架构 。 











































































































<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>jQuery Mobile 页 面 基本 架构 </title> 


<meta name="viewport" content="width=device-width,initial-scale=1"> 


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery. 
mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. 
js"></script> 
</head> 
<body> 
<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 标题 </h1></div> 
<div data-role="content"> 内 容 </div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
</body> 
</html> 


在 该 HTML 代码 中 ， 第 一 行 以 HTML 5 的 文档 声明 开始 ， 声 明 该 HTML 文档 是 一 个 基于 
HTML 5 标准 的 文档 。 

在 <head> 与 </head> 标签 之 间 添 加 <meta> 标 签 ， 在 该 标签 中 设置 name 属性 为 
viewport， 并 设置 该 标签 的 content 属性 ， 代 码 如 下 。 


<meta name="viewport" content="width=device-width,initial-scale=1"> 


添加 这 行 代码 的 功能 是 : 设置 移动 设备 中 浏览 器 缩放 的 宽度 与 等 级 。 通 常情 况 下 ， 移 动 设备 的 浏 
览 器 都 会 以 默认 的 宽度 显示 页 面 ， 默 认 宽度 会 导致 屏幕 缩小 ， 页 面 放 大 ， 不 适合 浏览 。 如 果 在 页 面 中 
添加 该 行 代码 ， 可 以 使 页 面 的 宽度 与 移动 设备 的 屏幕 宽度 相同 ， 更 加 适合 用 户 浏览 。 

在 页 面 的 <body> 与 </body> 标签 之 间 ， 在 第 一 个 <div> 标签 中 设置 data-role 属性 为 
page， 形 成 一 个 页 面容 器 ， 在 该 页 面容 器 中 分 别 添加 3 个 <div> 标签 ， 依 次 设置 data-role 属性 为 
header、content 和 footer， 从 而 形成 一 个 标准 的 jQuery Mobile 页 面 架构 。 


在 一 个 供 jQuery Mobile 使 用 的 HTML 页 面 中 ， 可 以 包含 一 个 元 素 data-role 属性 值 为 page 
的 容器 ， 也 允许 包含 多 个 ， 从 而 形成 多 容器 的 jQuery Mobile 页 面 结构 。 容 器 之 间 各 自 独立 ， 并 且 每 
个 容器 需要 拥有 唯一 的 id 名 称 。 

当 浏 览 器 在 加 载 多 容器 的 jQuery Mobile 页 面 时 ， 以 堆栈 的 方式 同时 加 载 。 同 一 页 面 中 的 不 同 
容器 之 间 跳 转 时 ， 设 置 超 链接 <a> 标签 的 href 属性 值 为 #+ 容器 的 id 名 称 。 单 击 超 链 接 时 ，jQuery 
Mobile 将 在 当前 页 面 中 寻找 相应 id 名 称 的 容器 , 以 动画 效果 切换 至 该 容器 中 , 实现 容器 间 内 容 的 访问 。 


虽然 在 一 个 页 面 中 ， 可 以 借助 容器 的 框架 实现 多 种 页 面 的 显示 ， 但 是 把 全 部 代码 写 在 一 个 页 面 
会 延缓 页 面 被 加 载 的 时 间 ， 使 代码 元 余 ， 且 不 利于 功能 的 分 工 与 维护 的 安全 性 。 因 此 ,在 jQuery 
Mobile 中 ， 可 以 采用 开发 多 个 页 面 并 通过 外 部 链接 的 方式 ， 实 现 页 面相 互 切换 的 效果 。 
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[GE 新 建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-1-3.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 代 码 如 
下 所 示 。 


[EE 国 ”在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 页 面 代码 。 


敬畏 ”新 建 一 个 HTML 5 页面， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 about.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 。 
EB 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 





<p> ”工作 室 成 立 于 2014 年 初 ， 在 互动 设计 和 互动 营销 领域 有 着 独特 理解 。 我 们 一 直 专注 于 互 
联网 整合 营销 传播 服务 ， 以 客户 品牌 形象 为 重 ， 提 供 精确 的 策划 方案 与 视觉 设计 方案 ， 团 队 整体 有 着 国际 化 意 
识 与 前 瞻 思 想 ; 以 视觉 设计 创意 带动 客户 品牌 提升 ， 洞 察 互 联网 发 展 趋势 。<p> 
<p><em><a href="15-1-3.html” rel="external"> 返回 首页 </a></em></p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
</body> 


国 五 ”保存 页 面 ,在 Opera Mobile 模拟 器 中 预览 该 15-1-3.html 页 面 ， 效 果 如 图 15-1 所 示 。 
单 击 页 面 中 的 “关于 我 们 ”链接 文字 ， 将 跳 转 到 about.html 页 面 显示 ， 如 图 15-2 所 示 。 
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图 15-1 图 15-2 


在 jQuery Mobile 页 面 中 ， 如 果 单 击 一 个 指向 外 部 页 面 的 超 链接 ，jQuery Mobile 将 自动 分 析 该 
URL 地 址 , 自动 产生 一 个 AJAX 请 求 。 在 请 求 过 程 中 , 会 弹出 一 个 显示 进度 的 提示 框 , 如 果 请 求 成 功 ， 
jQuery Mobile 将 自动 构建 页 面 结构 ， 载 入 主页 面 的 内 容 ， 同 时 初始 化 全 部 的 jQuery Mobile 组 件 ， 
将 新 添加 的 页 面 内 容 显 示 在 浏览 器 中 ; 如 果 请 求 失败 ，jQuery Mobile 将 弹出 一 个 错误 信息 提示 框 ， 
数秒 后 该 提示 框 自动 消失 ， 页 面 也 不 会 刷新 。 

如 果 不 想 采用 AJAX 请 求 的 方式 打开 一 个 外 部 链接 页 面 ， 只 需要 在 <a> 标签 加 rel 属性 ， 设 置 
该 属性 的 值 为 external， 该 页 面 将 脱离 整个 jQuery Mobile 的 主页 环境 ， 以 独自 打开 的 页 面 效 果 在 
浏览 器 中 显示 。 


在 手机 APP 或 移动 网 页 中 常常 可 以 看 到 “返回 ”按钮 ， 单 击 该 按钮 即 可 后 退 到 上 一 页 面 中 。 在 
jQuery Mobile 页 面 中 有 两 种 方法 实现 后 退 功能 。 一 种 是 在 容器 的 标签 中 设置 data-add-back-btn 
属性 值 为 rue， 例 如 下 面 的 代码 。 


<div data-role="header" data-add-back-btn="true"> </div> 


另 一 种 是 为 后 退 链 接 对 象 添加 超 链 接 <a> 标签 ， 在 该 标签 中 设置 data-rel 属性 值 为 back， 例 
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如 下 面 的 代码 。 


<a href=" 链接 地 址 ”data-rel="back"> 返回 </a> 


通过 在 超 链接 <a> 标签 中 设置 data-rel 属性 值 为 back， 实 现 后 退 功能 时 ， 单 击 该 超 链接 将 被 
视 为 后 退行 为 ， 并 且 将 忽视 href 属性 的 URL 值 ， 直 接 退 回 至 浏览 器 历史 的 上 一 页 面 。 


在 jQuery Mobile 页 面 中 实现 后 退 功能 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 15 章 \15-1-4.html ”视频 : 光盘 \ 视 频 \ 第 15 章 \15-1-4.mp4 


[GE 新 建 一 个 HTML 5 页面， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-1-4.html”。 在 
<head> 与 </head> 标 签 之 间 添 加 <meta> 标签, 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 案 例 相 同 。 
i 开 国 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<body> 
<!-- 第 1 个 容器 开始 --> 
<div id="pagel" data-role="page"> 
<div data-role="header"><hl> 网 页 标题 </h1></div> 
<div data-role="content"> 
<p><a href="#page2"> 关于 我 们 </a><p> 
<p> 我 们 的 作品 </p> 
<p> 服务 范围 </p> 
<p> 联系 我 们 </p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
<!-- 第 1 个 容器 结束 --> 
<!-- 第 2 个 容器 开始 --> 
<div id="page2" data-role="page" > 
<div data-role="header" data-add-back-btn="true"><h1> 关于 我 们 </h1></div> 
<div data-role="content"> 
<p> ”工作 室 成 立 于 2014 年 初 ， 在 互动 设计 和 互动 营销 领域 有 着 独特 理解 。 我 们 一 直 专 注 于 互 
联网 整合 营销 传播 服务 ， 以 客户 品牌 形象 为 重 ， 提 供 精确 的 策划 方案 与 视觉 设计 方案 ， 团 队 整 体 有 着 国际 化 意 
识 与 前 瞻 思 想 ; 以 视觉 设计 创意 带动 客户 品牌 提升 ， 洞 察 互 联网 发 展 趋势 。<p> 
<p><em><a href="" data-rel="back"> 返回 上 一 页 </a></em></p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
<! 一 第 2 个 容器 结束 --> 
</body> 


此 处 在 一 个 jQuery Mobile 页 面 中 添加 了 两 个 容器 ， 当 单 击 第 一 个 容器 中 的 “关于 我 们 ”链接 时 
跳 转 到 第 二 个 容器 显示 。 在 第 二 个 容器 中 通过 两 种 方式 实现 jQuery Mobile 页 面 的 后 退 功能 ， 一 种 是 


在 页 头 的 <div> 标签 中 添加 data-add-back-btn 属性 设置 , 属性 值 为 true。 另 一 种 是 为 “返回 上 一 页 ” 
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文字 添加 超 链接 标签 <a>， 并 在 该 标签 中 添加 data-rel 属性 设置 ， 属 性 值 为 back。 

[国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 15-1-4.html 页 面 ， 显 示 第 一 个 容器 内 容 ， 
效果 如 图 15-3 所 示 。 单 击 页 面 中 的 “关于 我 们 ”链接 文字 ， 将 跳 转 并 显示 页 面 中 的 第 二 个 容器 内 容 ， 
如 图 15-4 所 示 。 单 击 标题 栏 上 的 返回 按钮 或 “返回 上 一 页 ”链接 ， 都 可 以 返回 到 第 一 个 容器 中 。 


CT i 一 i 





data-add-back-btn="true" 


data—rel="back" 





图 15-3 图 15-4 


在 超 链接 <a> 标签 中 设置 data-rel 属性 为 back， 表 示 任 何 单 击 该 超 链 接 的 操 
作 都 被 视 为 后 退 动作 ， 并 且 忽 视 href 属性 所 设置 的 URL 地 址 ， 只 是 直接 回 退 到 上 
一 个 历史 记录 页 面 ， 这 种 页 面 切换 的 效果 可 用 于 关闭 一 个 打开 的 对 话 框 或 页 面 。 


在 设置 回 退 链接 属性 时 ， 除 了 将 data-rel 属性 设置 为 back 外 ， 还 应 该 为 href 
属性 设置 一 个 可 以 访问 的 正确 URL 地 址 ， 从 而 确保 一 些 不 支持 data-rel 属性 的 浏 
览 器 可 以 单 击 该 超 链 接 。 





jQuery Mobile 中 创建 对 话 框 的 方式 十 分 方便 ， 只 需要 在 指向 页 面 的 链接 元 素 中 添加 data-rel 
属性 ， 并 设置 该 属性 值 为 dialog。 单 击 该 链接 时 ,打开 的 页 面 将 以 一 个 对 话 框 的 形式 展示 在 浏览 器 中 。 
单 击 对 话 框 中 的 任意 链接 时 ， 打 开 的 对 话 框 将 自动 关闭 ， 并 以 “ 回 退 ”的 形式 切换 至 上 一 页 。 

将 链接 元 素 的 data-rel 属性 值 设置 为 true, 打开 的 对 话 框 实际 上 是 一 个 标准 的 page 容器 。 因 此 ， 
在 打开 时 ， 也 可 以 通过 设置 data-transition 属性 值 ， 选 择 打开 对 话 框 时 切换 页 面 的 动画 效果 。 


实现 弹出 对 话 框 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 15 章 \15-1-5.html 。 视频 : 光盘 \ 视 频 \ 第 15 章 \15-1-5.mp4 


[GE 新 建 一 个 HTML 5 页面， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-1-5.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
案例 相同 。 
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[王国 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 
<!-- 第 工 个 容器 开始 --> 


<div id="pagel" data-role="page"> 
<div data-role="header"><hl> 网 页 标题 </h1></div> 
<div data-role="content"> 
<p><a href="#page2" data-rel="dialog" data-transition="pop"> 关于 我 们 </a><p> 
<p> 我 们 的 作品 </p> 
<p> 服务 范围 </p> 
<p> 联系 我 们 </p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
<!-- 第 1 个 容器 结束 --> 
<! 一 第 2 个 容器 开始 -> 
<div id="page2" data-role="page"> 
<div data-role="header"><h1> 关于 我 们 </h1l></div> 
<div data-role="content"> 
<p> ”工作 室 成 立 于 2014 年 初 ， 在 互动 设计 和 互动 营销 领域 有 着 独特 理解 。 我 们 一 直 专 注 于 互联 网 
整合 营销 传播 服务 ， 以 客户 品牌 形象 为 重 ， 提 供 精确 的 策划 方案 与 视觉 设计 方案 ， 团 队 整 体 有 着 国际 化 意识 与 
前 上 思想; 以 视觉 设计 创意 带动 客户 品牌 提升 ， 洞 察 互联 网 发 展 趋势 。<p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


<!-- 第 2 个 容器 结束 --> 


国 畏 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 15-1-5.html 页 面 ， 显 示 第 一 个 容器 内 容 ， 
效果 如 图 15-5 所 示 。 单 击 页 面 中 的 “关于 我 们 ”链接 文字 ， 将 以 弹出 窗口 的 方式 显示 第 2 个 容器 内 
容 ， 如 图 15-6 所 示 。 





图 15-5 图 15-6 
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设置 链接 的 data-rel 属性 值 为 dialog， 通 过 该 链接 打开 的 页 面 将 以 对 话 框 的 形 
式 展示 在 当前 页 面 中 ， 对 话 框 左上 角 自 带 一 个 “X” 关 闭 按钮 ， 单 击 该 按钮 ， 可 以 关 
闭 对 话 框 。 此 外 ， 在 对 话 框 内 添加 其 他 链接 按钮 ， 设 置 该 链接 按钮 的 data-rel 属性 
值 为 back， 单 击 该 链接 按钮 同样 可 以 实现 关闭 对 话 框 的 功能 。 





通常 情况 下 ， 移 动 终端 设备 的 系统 配置 要 低 于 PC 终端 ， 因 此 ， 在 开发 移动 应 用 程序 时 ， 更 要 注 
意 页 面 在 移动 终端 浏览 器 中 加 载 的 速度 。 如 果 速 度 过 慢 ， 用 户 的 体检 将 会 大 打折 扣 。 为 了 加 快 页 面 移 
动 终端 访问 的 速度 ， 在 jQuery Mobile 中 ， 使 用 预 加 载 和 页 面 缓存 都 是 十 分 有 效 的 方法 。 当 一 个 被 链 
接 的 页 面 设置 好 预 加 载 后 ，jQuery Mobile 将 在 加 载 完成 当前 页 面 后 自动 在 后 台 进行 预 加 载 设置 的 目 
标 页 面 ; 另 外， 使 用 页 面 缓存 的 方法 ， 可 以 将 访问 过 的 page 容器 都 缓存 到 当前 的 页 面 文 档 中 ， 下 次 
再 访问 时 ， 将 可 以 直接 从 缓存 中 读 取 ， 而 无 须 再 重新 加 载 页 面 。 


在 开发 移动 应 用 程序 时 ， 对 需要 链接 的 页 面 进行 预 加 载 是 非常 有 必要 的 。 因 为 当 一 个 链接 的 页 面 
设置 成 预 加载 方 式 时 ， 在 当前 页 面 加 载 完 成 之 后 ， 目 标 页 面 也 被 自动 加 载 到 当前 文档 中 ， 用 户 单 击 就 
可 以 马上 打开 ， 大 大 加 快 了 页 面 访问 的 速度 。 

在 jQuery Mobile 中 ， 想 要 实现 页 面 的 预 加 载 ， 有 以 下 两 种 方法 。 

(1) 在 需要 预 加 载 的 元 素 超 链接 标签 <a> 中 添加 data-prefetch 属性 ， 设 置 该 属性 的 属性 值 为 
true 或 不 设置 属性 值 均 可 。 添 加 该 属性 的 设置 后 ，jQuery Mobile 将 在 加 载 完成 当前 页 面 以 后 ， 自 动 
加 载 该 链接 元 素 所 指 的 目标 页 面 ， 即 href 属性 所 链接 的 页 面 。 其 使 用 格式 如 下 。 


<a href=" 链接 地 址 " data-prefetch="true"> 链接 对 象 </a> 


(2) 调用 JavaScript 代码 中 的 全 局 性 方法 $.mobile.loadPage() 来 预 加 载 指定 的 目标 HTML 页 
面 ， 其 最 终 的 效果 与 在 超 链 接 标 签 <a> 中 设置 data-prefetch 属性 一 样 。 


无 论 是 在 超 链接 标签 <a> 中 添加 data-prefetch 属性 设置 ， 还 是 使 用 全 局 性 方 
法 $.mobile.loadPage() 来 实现 页 面 的 预 加 载 功能 时 ， 都 允许 同时 加 载 多 个 页 面 。 
但 在 进行 预 加 载 的 过 程 中 需要 加 大 页 面 HTTP 的 访问 请 求 ， 这 可 能 会 延缓 页 面 访问 
的 速度 ， 因 此 该 功能 需要 有 选择 性 地 使 用 。 


在 jQuery Mobile 中 ， 可 以 通过 页 面 缓存 的 方式 将 访问 过 的 历史 内 容 写 入 页 面 文档 的 缓存 中 ; 当 
用 户 重 新 访问 时 ， 不 需要 重新 加 载 ， 只 要 从 缓存 中 读 取 就 可 以 。 
一 般 来 说 ， 如 果 需 要 将 页 面 的 内 容 写 入 文档 缓存 中 ， 有 以 下 两 种 方法 。 
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(1) 在 需要 被 缓存 的 元 素 属性 中 添加 data-dom-cache 属性 ， 设 置 该 属性 的 属性 值 为 true 或 不 
设置 属性 值 均 可 。 该 属性 的 功能 是 将 对 应 的 元 素 内 容 写 入 缓存 中 。 其 使 用 格式 如 下 。 


<div id="pagel" data-role="page" data-dom-cache="true">…</div> 


(2) 通过 JavaScript 代码 设置 一 个 全 局 性 的 jQuery Mobile 属性 值 为 true, 即 添加 代码 $.mobile. 
page.prototype.options.domCache=true， 可 以 将 当前 文档 写 入 缓存 中 。 


在 jQuery Mobile 页 面 中 实现 预 加 载 和 缓存 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 15 章 \15-2-2.html ” 视频: 光盘 \ 视 频 \ 第 15 章 \15-2-2.mp4 


[GE 新 建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-2-2.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
案例 相同 。 

E 玫 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-Iole="page" data-dom-cache="true"> 
<div data-role="header"><hl> 网 页 标题 </h1></div> 
<div data-role="content"> 
<p><a href="about .html" rel="external" data-prefetch="true"> 关于 我 们 (已 预 加 
载 )</a><p> 
<p> 我 们 的 作品 </p> 
<p> 服务 范围 </p> 
<p> 联系 我 们 </p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


辐 轩 ”保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 效 果 如 图 15-7 所 示 。 当 打开 该 页 面 时 
会 自动 缓存 该 页 面 ， 并 预 加 载 所 链接 的 about.html 页 面 ， 单 击 “ 关 于 我 们 ( 已 预 加载 )” 链 接 文 字 ， 
将 会 快速 显示 已 经 预 加 载 的 about.html 页 面 ， 如 图 15-8 所 示 。 
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我 们 的 作品 
用 人 区 
联 和 我 们 





图 15-8 
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变 得 缓慢 ， 因 此 一 旦 选择 了 开启 使 用 缓存 功能 ， 就 要 管理 好 缓存 的 内 容 ， 并 做 到 及 


四 使 用 页 面 缓存 的 功能 将 会 使 DOM 内 容 变 大 ， 可 能 导致 某 些 浏览 器 打开 的 速度 
时 清理 。 





头 部 栏 是 移动 应 用 中 工具 栏 的 组 成 部 分 ， 用 来 说 明 该 页 面 的 主体 内 容 。 头 部 栏 是 page 容器 中 的 
第 一 个 元 素 ,放置 的 位 置 十 分 重要 。 头 部 栏 由 页 面 标题 和 按钮 (最 多 两 个 ) 组 成 ,其 中 的 按钮 可 以 使 用 "后 
退 ” 按 钮 ， 也 可 以 添加 表单 元 素 中 的 按钮 ， 并 可 以 通过 设置 相关 属性 控制 头 部 按钮 的 相对 位 置 。 


头 部 栏 由 标题 文字 和 左右 两 边 的 按钮 构成 ， 标 题 文字 通常 使 用 <h1> 至 <h6> 标签 进行 标记 ， 常 
用 <h1> 标签 ， 无 论 取 值 是 多 少 ， 在 同一 个 移动 应 用 项 目 中 都 要 保持 一 致 。 标 题 文字 左右 两 边 可 以 分 
别 放 置 一 或 两 个 按钮 ， 用 于 标题 中 的 导航 操作 。 

例如 ， 下 面 的 jQuery Mobile 页 面 结构 。 


<div id="pagel" data-role="page"> 
<div data-role="header"> 
<hl> 头 部 栏 标题 </h1> 
</div> 
<div data-role="content"> 
<p> 内 容 <p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


在 jQuery Mobile 页 面 中 ， 在 <div> 标签 中 设置 data-role 属性 为 header， 即 可 将 该 元 素 设置 
为 jQuery Mobile 页 面 的 头 部 栏 。 


又 很 长 时 ，jQuery Mobile 会 自动 调整 需要 显示 的 标题 内 容 ， 隐 藏 的 内 容 以 “…” 的 


由 于 移动 设备 的 浏览 器 分 辨 率 不 尽 相同 ， 如 果 尺 寸 过 小 ， 而 头 部 栏 的 标题 内 容 
形式 显示 在 头 部 栏 中 。 


添加 data-theme 属性 设置 ， 将 其 属性 值 设置 为 对 应 的 主题 样式 即 可 。 关 于 jQuery 


头 部 栏 默 认 的 主题 样式 为 a， 如 果 需 要 修改 主题 样式 ， 只 需要 在 头 部 栏 标签 中 
图 Mobile 中 的 主题 将 在 第 17 章 中 进行 介绍 。 
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在 头 部 栏 标签 中 添加 data-add-back-btn 属性 ， 可 以 在 头 部 栏 的 左 侧 增加 一 个 默认 名 为 back 
的 后 退 按钮 。 此 外 ， 还 可 以 通过 在 头 部 栏 标签 中 添加 data-back-btn-text 属性 设置 ， 从 而 设置 后 退 
按钮 中 显示 的 文字 。 

例如 ， 下 面 的 jQuery Mobile 页 面 代码 。 





在 以 上 的 jQuery Mobile 页 面 代码 中 创建 了 3 个 容器 ， 并 且 分 别 在 3 个 容器 的 头 部 栏 标签 中 添 
加 了 data-add-back-btn='"true" 属性 设置 ， 用 于 在 头 部 栏 左 侧 显示 后 退 按钮 。 在 Opera Mobile 
模拟 器 中 预览 该 页 面 ， 可 以 看 到 3 个 容器 页 面 的 显示 效果 ， 如 图 15-9 所 示 。 
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图 15-9 


第 1 个 容器 页 面 ， 虽 然 在 头 部 栏 中 添加 了 data-add-back-btn="true" 属性 设置 ， 但 是 该 页 面 
并 没有 可 以 后 退 的 页 面 ， 所 以 不 显示 后 退 按钮 。 单 击 第 1 个 页 面 中 的 链接 跳 转 到 第 2 个 容器 页 面 ， 在 
头 部 栏 中 添加 了 data-add-back-btn="true'" 属性 设置 ， 所 以 在 头 部 栏 左 侧 显示 默认 的 后 退 按钮 。 
单 击 第 2 个 页 面 的 链接 跳 转 到 第 3 个 容器 页 面 ， 在 头 部 栏 中 添加 了 data-add-back-btn="true'" 属 
性 设置 ， 并 且 还 添加 了 data-back-btn-text 属性 设置 ， 可 以 看 到 修改 后 退 按钮 文字 的 效果 。 


在 头 部 栏 中 ， 还 可 以 手动 编写 代码 添加 按钮 ， 通 常 使 用 <a> 标签 来 实现 其 他 按钮 的 效果 。 由 于 
头 部 栏 空间 的 局 限 性 ， 所 添加 按钮 都 是 内 联 类 型 的 ， 即 按钮 宽度 只 允许 放置 图 标 与 文字 这 两 个 部 分 。 


在 头 部 栏 中 添加 按钮 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 15 章 \15-3-3.html 。” 视频 : 光盘 \ 视 频 \ 第 15 章 \15-3-3.mp4 


[OSI 新 建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-3-3.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
案例 相同 。 

国 出 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<!-- 第 1 个 容器 开始 --> 
<div id="pagel" data-role="page"> 
<div data-role="header" data-position="inline"> 
<a href="#" data-icon="arrow-1"> 上 一 张 </a> 
<h1> 第 1 张 图 片 </h1> 
<a href="#page2" data-icon="arrow-r"> 下 一 张 </a> 


</div> 
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<div data-role="content"> 
<p align="center"><img src="images/153301.jpg"></p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
<! 一 第 1 个 容器 结束 -> 
<!-- 第 2 个 容器 开始 --> 
<div id="page2" data-role="page"> 
<div data-role="header" data-position="inline"> 
<a href="#pagel" data-icon="arrow-1"> 上 一 张 </a> 
<hl> 第 2 张 图 片 </h1> 
<a href="#" data-icon="arrow-r"> 下 一 张 </a> 
</div> 
<div data-role="content"> 
<p align="center"><img src="images/153302.jpg"></p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


<!-- 第 2 个 容器 结束 --> 


在 两 个 容器 的 头 部 栏 中 分 别 添加 两 个 按钮 ， 左 侧 为 “上 一 张 ”， 右 侧 为 “下 一 张 ”。 单 击 第 1 个 
容器 的 “下 一 张 ” 按 钮 时 ， 切 换 到 第 2 个 容器 显示 ; 单 击 第 2 个 容器 的 “上 一 张 ” 按 钮 时 ， 切 换 到 第 
1 个 容器 显示 。 
王国 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 15-3-3.html 页 面 ， 显 示 第 1 个 容器 内 容 ， 
效果 如 图 15-10 所 示 。 单 击 第 1 个 容器 头 部 栏 中 的 “下 一 张 ”按钮 ， 切 换 到 第 2 个 容器 显示 ， 效 果 
如 图 15-11 所 示 。 
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图 15-11 


在 容器 元 素 头 部 栏 中 添加 data-position="inline'" 属性 设置 ， 对 容器 元 素 进行 定位 。 使 用 这 种 定 
位 模式 ， 无 须 编写 其 他 JavaScript 或 CSS 样式 代码 便 可 以 确保 头 部 栏 在 更 多 的 浏览 器 中 显示 。 
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头 部 栏 中 的 按钮 链接 元 素 是 头 部 栏 的 首 个 元 素 ， 默 认 位 置 是 在 标题 的 左 侧 ， 
默认 按钮 个 数 只 有 一 个 。 当 在 标题 左 侧 添加 两 个 链接 按钮 时 ， 左 侧 链 接 按钮 会 按 
排列 顺序 保留 第 一 个 ， 第 二 个 按钮 会 自动 放置 在 标题 的 右 侧 。 因 此 ， 在 头 部 栏 中 
放置 链接 按钮 时 ， 鉴 于 内 容 长 度 的 限制 ， 尽 量 在 标题 栏 的 左右 两 侧 分 别 放置 一 个 
链接 按钮 。 


在 头 部 栏 中 ， 如 果 只 放置 一 个 链接 按钮 ， 不 论 位 置 在 标题 的 左 侧 还 是 右 侧 ， 其 最 终 都 会 显示 在 标 
题 的 左 侧 。 如 果 想 改变 位 置 ， 需 要 添加 新 的 类 别 属性 ui-btn-left 和 ui-btn-right，ui-btn-left 表示 
按钮 居 标 题 左 侧 ( 默认 值 )，ui-btn-right 表示 按钮 居 标 题 右 侧 。 

例如 下 面 的 jQuery Mobile 页 面 代 码 。 


<!-- 第 1 个 容器 开始 --> 
<div id="pagel" data-role="page"> 
<div data-role="header" data-position="inline"> 
<h1l> 第 1 张 图 片 </h1> 
<a href="#page2" data-icon="arrow-r" class="ui-btn-right"> 下 一 张 </a> 
</div> 
<div data-role="content"> 
<p align="center"><img src="images/153301.jpg"></p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
<!-- 第 1 个 容器 结束 --> 
<!-- 第 2 个 容器 开始 --> 
<div id="page2" data-role="page"> 
<div data-role="header" data-position="inline"> 
<a href="#pagel" data-add-back-btn="false" data-icon="arrow-l1" class="ui- 
btn-left"> 上 一 张 </a> 
<hl> 第 2 张 图 片 </h1> 
</div> 
<div data-role="content"> 
<p align="center"><img src="images/153302.jpg"></p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


<! 一 第 2 个 容器 结束 --> 


保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 页 面 ， 可 以 看 到 第 1 个 容器 的 “下 一 张 ”按钮 显示 在 
头 部 栏 的 右 侧 ， 第 2 个 容器 的 “上 一 张 ”按钮 显示 在 头 部 栏 的 左 侧 ， 如 图 15-12 所 示 。 
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文档 分 类 ， 快 速 管理 本 地 文科 快速 浏览 


SO 本 - 一 BS) “< 
图 15-12 





在 头 部 栏 中 对 需要 定位 的 链接 按钮 添加 ui-btn-left 和 ui-btn-right 两 个 类 别 属性 ， 用 来 设置 头 
部 栏 中 标题 两 侧 的 按钮 位 置 ， 该 类 别 属性 在 只 有 一 个 按钮 并 且 想 放置 在 标题 右 侧 时 非常 有 用 。 另 外 ， 
通常 情况 下 ， 需 要 将 链接 按钮 的 data-add-back-btn 属性 设置 为 false， 从 而 确保 容器 切换 时 不 会 
出 现 “ 后 退 ” 按 钮 ， 影 响 标题 左 侧 按钮 的 显示 效果 。 


jQuery Mobile 为 导航 栏 提 供 了 专门 的 组 件 ， 使 用 时 只 需要 在 <div> 标签 中 添加 data- 
role="navbar" 属性 设置 ， 即 可 将 该 Div 设置 为 一 个 导航 栏 容器 。 在 该 容器 内 ， 通 过 <ul> 标签 设置 
导航 栏 的 各 子 类 导航 按钮 ， 每 一 行 最 多 可 以 放置 5 个 按钮 ， 超 出 个 数 的 按钮 自动 显示 在 下 一 行 ; 另外 ， 
导航 栏 中 的 按钮 可 以 引用 系统 的 图 标 ， 也 可 以 自 定 义 图 标 。 


jQuery Mobile 中 的 导航 栏 是 一 个 被 <div> 元 素 包 囊 的 容器 ， 常 常 放置 在 页 面 的 头 部 或 尾部 。 在 
容器 内 ， 如 果 需 要 设置 某 个 子 类 导航 按钮 为 选中 状态 ， 只 需 在 按钮 的 元 素 中 添加 ui-btn-active 类 别 
属性 即 可 。 


创建 头 部 导航 栏 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 15 章 \15-4-1.html 。 视频 : 光盘 \ 视 频 \ 第 15 章 \15-4-1.mp4 


[GE 新 建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-4-1.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
案例 相同 。 

E 于 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 
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国 3 轩 | 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 15-4-1.html 页 面 ， 显 示 第 1 个 容器 内 容 ， 
可 以 看 到 头 部 栏 下 方 的 导航 栏 效果 ， 如 图 15-13 所 示 。 单 击 导航 栏 中 的 “平面 设计 ”链接 ， 切 换 到 
第 2 个 容器 显示 ， 导 航 栏 效果 
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这 里 旺 示 的 是 风机 设计 相关 图 书 内 窜 这 时 旺 示 芍 是 平面 讼 计 栓 关 图 书 内 容 





图 15-14 


导航 栏 可 以 放置 在 jQuery Mobile 页 面 的 头 部 栏 中 ， 也 可 以 放置 在 页 面 的 底部 栏 footer 中 。 


在 导航 栏 的 内 部 容器 中 ， 每 个 子 类 导航 按钮 的 宽度 都 是 一 致 的 ， 因 此 ， 每 增加 
一 个 子 类 按钮 ， 都 会 将 原先 按钮 的 宽度 按照 等 比例 的 方式 进行 均 分 。 即 如 果 原 来 有 
2 个 按钮 ， 它 们 的 宽度 各 为 浏览 器 宽度 的 1/2， 再 增加 1 个 按钮 时 ， 原 先 的 2 个 按钮 
宽度 又 变 成 了 1/3， 以 此 类 推 。 


在 导航 栏 中 ， 各 子 类 导航 链接 按钮 是 通过 <a> 元 素来 实现 的 ， 如 果 要 想 给 导航 栏 中 的 子 类 链接 
按钮 添加 图 标 ， 只 需要 在 对 应 的 <a> 元 素 中 添加 data-icon 属性 ， 并 在 jQuery Mobile 自 带 的 系统 
图 标 集合 中 选择 一 个 图 标 名 作为 该 属性 的 值 ， 如 info 表示 显示 加 图 标 ， 图 标的 默认 位 置 在 按钮 链接 
文字 的 上 方 。 

data-icon 属性 值 对 应 的 图 标 效 果 如 表 15-1 所 示 。 


表 15-1 data-icon 属性 值 对 应 的 图 标 效 果 








属性 值 | 

Ei 0 
| 
EE 0 
EE 
| 
| 
EE © 
Bi 
| 国生 2 
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上 表 中 data-icon 属性 值 所 对 应 的 图 标 效果 ， 不 仅 用 于 导航 栏 中 的 子 类 链接 按钮 ， 也 适用 于 
jQuery Mobile 页 面 中 各 类 按钮 型 元 素 增加 图 标 。 
例如 下 面 的 jQuery Mobile 页 面 代码 ， 可 为 导航 链接 按钮 添加 图 标 效果 。 


<!-- 第 1 个 容器 开始 --> 


<div data-role="navbar"> 
<ul> 
<1i><a href="#" class="ui-btn-active” data-icon="info"> 网 页 设计 </a></1i> 
<li><a href="#page2" data-icon="alert"> 平面 设计 </a></1i> 
<li><a href="#"” data-icon="gear"> 动画 设计 </a></1i> 
</ul> 
</div> 
<!-- 第 1 个 容器 结束 --> 
<! 一 第 2 个 容器 开始 一 > 
<div data-role="navbar"> 
<ul> 
<li><a href="#pagel" data-icon="info"> 网 页 设计 </a></1i> 
<li><a href="#" class="ui-btn-active” data-icon="alert"> 平面 设计 </a></1i> 
<li><a href="#" data-icon="gear"> 动画 设计 </a></1i> 
</ul> 
</div> 


<!-- 第 2 个 容器 结束 --> 


保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 在 各 导航 链接 文字 上 方 添加 的 图 标 
效果 ， 如 图 15-15 所 示 。 


这 本 曲直 的 网 仙 要 天 轩 包 岂可 这 时 未 的 用 生计 相 天 图书 内 百 





图 15-15 
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导航 栏 中 的 图 标 默认 放置 在 按钮 文字 的 上 方 ， 如 果 需 要 调整 图 标的 位 置 ， 只 需要 在 该 导航 栏 容器 元 
素 中 添加 data-iconpos 属性 。 该 属性 用 于 控制 整个 导航 栏 容器 中 图 标的 位 置 ， 上 默认 值 为 top， 表 示 图 标 
在 按钮 文字 的 上 方 ， 此 外 ， 还 可 以 选择 left、right 和 bottom， 分 别 表 示 图 标 在 文字 的 左边 、 右 边 和 下 方 。 
例如 ， 下 面 的 jQuery Mobile 页 面 代码 ， 设 置 导航 图 标的 位 置 。 


<!-- 第 1 个 容器 开始 --> 





<div data-role="navbar" data-iconpos="left"> 
<ul> 
<1i><a href="#" class="ui-btn-active"” data-icon="info"> 网 页 设计 </a></1i> 
<li><a href="#page2" data-icon="alert"> 平面 设计 </a></1i> 
<li><a href="#"” data-icon="gear"> 动画 设计 </a></1i> 
</ul> 
</div> 
<! 一 第 1 个 容器 结束 一 > 
<! 一 第 2 个 容器 开始 --> 
<div data-role="navbar" data-iconpos="right"> 
<ul> 
<li><a href="#pagel"” data-icon="info"> 网 页 设计 </a></1i> 
<li><a href="#" class="ui-btn-active" data-icon="alert"> 平 面 设计 </a></1i> 
<li><a href="#"” data-icon="gear"> 动画 设计 </a></1i> 
</ul> 
</div> 


<!-- 第 2 个 容器 结束 --> 


保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 在 第 1 个 容器 页 面 的 导航 栏 中 各 链接 按 
钮 中 的 图 标 显示 在 左 人 出， 在 第 2 个 容器 页 面 的 导航 栏 中 各 链接 按钮 图 标 显示 在 右 人 出 ， 如 图 15-16 所 示 。 


. Ee ee 





城 轩 旺 水 的 网 站 从 计 昌 关 用 向 可 
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图 15-16 
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钮 图 标的 位 置 。 因 此 ，data-iconpos 属性 是 一 个 全 局 性 的 属性 ， 针 对 的 是 整个 导航 


和 data-iconpos 属性 针对 的 是 整个 导航 栏 容器 ， 而 不 是 导航 栏 内 某 个 导航 链接 按 
| 栏 内 全 部 的 链接 按钮 。 





其 实 ， 尾 部 栏 与 头 部 栏 的 结构 差不多 ， 区 别 是 设置 的 data-role 属性 值 不 同 。 相 对 头 部 栏 来 说 ， 
尾部 栏 的 代码 更 加 简洁 ， 在 尾部 栏 中 可 以 添加 按钮 组 和 各 种 表单 元 素 ， 同 时 还 可 以 对 某 个 尾部 栏 进行 
定位 处 理 。 


在 jQuery Mobile 页 面 的 尾部 栏 中 添加 按钮 时 ， 为 了 减少 各 按钮 的 间距 ， 通 常 需要 在 按钮 的 外 围 
添加 一 个 data-role 属性 值 为 controlgroup 的 容器 ， 形 成 一 个 按钮 组 显示 在 尾部 栏 中 。 同 时 ， 在 该 
容器 中 添加 data-type 属性 , 并 将 该 属性 的 值 设置 为 horizontal, 表示 容器 中 的 按钮 按 水 平顺 序 排列 。 


在 尾部 栏 中 添加 按钮 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 15 章 \15-5-1.html 视频: 光盘 \ 视 频 \ 第 15 章 \15-5-1.mp4 


[GE 新 建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-5-1.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
案例 相同 。 

[ 王 于 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 网 页 标题 </h1></div> 
<div data-role="content"> 
<p> 页 面 的 正文 内 容 部 分 </p> 
</div> 
<div data-role="footer"> 
<div data-role="controlgroup" data-type="horizontal"> 
<a href="#" data-role="button" data-icon="home"> 网 站 首页 </a> 
<a href="#" data-role="button" data-icon="star"> 关于 我 们 </a> 
<a href="#" data-role="button" data-icon="info"> 联系 我 们 </a> 
</div> 
</div> 


</div> 


葬 畏 | 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 在 该 页 面 底部 栏 中 添加 按钮 的 
效果 ， 如 图 15-17 所 示 。 
区 ”由 于 底部 栏 中 的 按钮 外 围 被 一 个 data-role 属性 值 为 controlgroup 的 容器 所 包 庄 ， 因 此 ， 
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按钮 之 间 没 有 任何 的 空隙 。 如 果 想 要 给 底部 栏 中 的 按钮 添加 相应 的 空隙 ， 则 不 需要 使 用 容器 包 庄 ， 并 
且 在 底部 栏 容器 中 添加 ui-bar 类 别 属 性 ， 代 码 如 下 所 示 。 


<div data-role="footer" class="ui-bar"> 
<a href="#" data-role="button” data-icon="home"> 网 站 首页 </a> 
<a href="#" data-role="button” data-icon="star"> 关 于 我 们 </a> 
<a href="#" data-role="button"” data-icon="info"> 联系 我 们 </a> 
</div> 


[国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 在 该 页 面 底部 栏 中 添加 按钮 的 
效果 ， 如 图 15-18 所 示 。 


的 正六 夫 本 分 天 的 正夫 本本 分 
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图 15-17 


在 底部 栏 中 可 以 添加 按钮 组 ， 也 可 以 向 容器 内 增加 表单 中 的 元 素 ， 如 <select>、<text> 等 。 为 
了 确保 表单 元 素 在 底部 栏 中 的 正常 显示 ， 需 要 在 底部 栏 容器 中 添加 ui-bar 类 别 属性 ， 使 新 增加 的 表 
单元 素 间 保 持 一 定 的 距离 ， 此 外 ， 将 data-position 属性 值 设 置 为 inline， 用 于 统一 设 定 各 表单 元 素 
的 显示 位 置 。 


在 尾部 栏 中 添加 下 拉 列 表 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 15 章 \15-5-2.html 。 视频 : 光盘 \ 视 频 \ 第 15 章 \15-5-2.mp4 


[GE 新 建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-5-2.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
案例 相同 。 

EE 于 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 
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<div id="pagel" data-role="page"> 
<div data-role="header"><hl> 网 页 标题 </h1></div> 
<div data-role="content"> 
<p> 页 面 的 正文 内 容 部 分 </p> 
</div> 
<div data-role="footer" class="ui-bar" data-position="inline"> 
<label for="selLink"> 友情 链接 </1abel> 
<select name="selLink" id="selLink"> 
<option value="0"> 请 选择 </option> 
<option value="1"> 链接 选项 1</option> 
<option value="2"> 链接 选项 2</option> 
<option value="3"> 链接 选项 3</option> 
<option value="4"> 链接 选项 4</option> 
<option value="5"> 链接 选项 5</option> 
</select> 
</div> 


</div> 


辐 畏 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 在 该 页 面 底部 栏 中 添加 表单 元 
素 的 效果 ， 如 图 15-19 所 示 。 单 击 该 表单 元 素 可 以 选择 相应 的 选项 ， 如 图 15-20 所 示 。 





图 15-19 图 15-20 
Ea 移动 终端 与 PC 端的 浏览 器 在 显示 表单 元 素 时 存在 一 些 细微 的 差别 ， 例 如 
<select> 元 素 ， 在 PC 端的 浏览 器 中 是 以 下 拉 列 表 框 的 形式 展示 ， 而 在 移动 终端 ， 
则 是 以 弹出 框 的 形式 展示 全 部 的 列表 内 容 。 





jQuery Mobile 中 提供 了 许多 非常 实用 的 工具 与 组 件 , 例如 多 列 的 网 格 布 局 、 折 私 的 面板 控制 等 ， 
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使 用 这 些 工具 和 组 件 可 以 帮助 设计 者 快速 对 jQuery Mobile 页 面 的 正文 区 域 进行 格式 化 处 理 。 








使 用 jQuery Mobile 中 提供 的 名 称 为 ui-grid 的 CSS 样式 可 以 实现 jQuery Mobile 页 面 中 内 
容 的 网 格 布局 。 该 CSS 样式 有 4 种 预 设 的 布局 设置 : ui-grid-a、ui-grid-b、ui-grid-c 和 ui- 
grid-d， 分 别 对 应 两 列 、 三 列 、 四 列 和 五 列 的 网 格 布局 形式 ， 可 以 最 大 范围 满足 页 面 多 列 布局 的 需求 。 

在 jQuery Mobile 页 面 中 使 用 网 格 布局 时 ， 整 个 宽度 为 100% ， 没 有 任何 的 边 距 (margin)、 填 
充 (padding) 和 背景 色 设 置 ， 因 此 不 会 影响 到 元 素 在 网 格 中 的 显示 位 置 。 


在 jQuery Mobile 页 面 中 创建 布局 网 格 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 15 章 \15-6-1.html ”视频 : 光盘 \ 视 频 \ 第 15 章 \15-6-1.mp4 


OI 新 建 一 个 HTML 5 页面， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-6-1.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代码 。 
[ 开 国 ”在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 页 面 代码 。 





<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 头 部 标题 </h1></div> 
<div data-role="content"> 
<div class="ui-grid-a">/* 创建 两 列 布局 */ 
<div class="ui-block-a"> 
<div class="ui-bar ui-bar-a" style="height:60px;"> 两 列 布局 第 1 列 </div> 
</div> 
<div class="ui-block-b"> 
<div class="ui-bar ui-bar-a" style="height:60px;"> 两 列 布局 第 2 列 </div> 
</div> 
</div> 
<div class="ui-grid-b">/* 创建 三 列 布局 */ 
<div class="ui-block-a"> 
<div class="ui-bar ui-bar-b" style="height:60px;"> 三 列 布局 第 1 列 </div> 
</div> 
<div class="ui-block-b"> 
<div class="ui-bar ui-bar-b" style="height:60px;"> 三 列 布局 第 2 列 </div> 
</div> 
<div class="ui-block-c"> 
<div class="ui-bar ui-bar-b" style="height:60px;"> 三 列 布局 第 区 列 </div> 
</div> 
</div> 
<div class="ui-grid-c">/* 创建 四 列 布局 */ 
<div class="ui-block-a"> 
<div class="ui-bar ui-bar-c" style="height:60px;"> 四 列 布局 第 1 列 </div> 


</div> 
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<div class="ui-block-b"> 
<div class="ui-bar ui-bar-c" style="height:60px;"> 四 列 布局 第 2 列 </div> 
</div> 
<div class="ui-block-c"> 
<div class="ui-bar ui-bar-c"” style="height:60px;"> 四 列 布局 第 3 列 </div> 
</div> 
<div class="ui-block-d"> 
<div class="ui-bar ui-bar-c" style="height:60px;"> 四 列 布局 第 4 列 </div> 
</div> 
</div> 
<div class="ui-grid-d">/* 创建 五 列 布局 */ 
<div class="ui-block-a"> 
<div class="ui-bar ui-bar-d" style="height:60px;"> 五 列 布局 第 1 列 </div> 
</div> 
<div class="ui-block-b"> 
<div class="ui-bar ui-bar-d" style="height:60px; "> 五 列 布局 第 2 列 </div> 
</div> 
<div class="ui-block-c"> 
<div class="ui-bar ui-bar-d" style="height:60px; "> 五 列 布局 第 3 列 </div> 
</div> 
<div class="ui-block-d"> 
<div class="ui-bar ui-bar-d" style="height:60pxj "> 五 列 布局 第 4 列 </div> 
</div> 
<div class="ui-block-e"> 
<div class="ui-bar ui-bar-d" style="height:60px; "> 五 列 布局 第 5 列 </div> 
</div> 
</div> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


需要 添加 一 个 多 列 的 网 格 区 域 ， 首 先 通 过 <div> 标签 构建 一 个 容器 ， 如 果 是 两 列 ， 将 为 该 容器 添 
加 class 属性 值 为 ui-grid-a; 如 果 是 三 列 ， 则 为 该 容器 添加 class 属性 值 为 ui-grid-b， 依 此 类 推 。 

在 已 构建 的 容器 中 添加 子 容器 ， 如 果 是 两 列 ， 则 给 两 个 子 容器 分 别 添加 ui-block-a 和 Ui- 
block-b 的 类 样式 ， 如果 是 三 列 ， 则 给 三 个 子 容器 分 别 添加 ui-block-a、ui-block-b 和 ui- 
block-c 的 类 样式 ， 其 他 多 列 依 此 类 推 。 

最 后 ， 在 子 容器 中 放置 需要 显示 的 内 容 。 在 本 实例 中 , 每 个 子 容器 都 分 别 放置 了 一 个 <div> 标签 ， 
代码 如 下 。 


<div class="ui-bar ui-bar-a" style="height :60px; "> 两 列 布局 第 1 列 </div> 


在 上 述 代 码 中 ， 在 “div> 标签 中 通过 class 属性 应 用 名 称 为 ui-bar 和 ui-bar-a 的 CSS 样式 ， 
这 两 个 都 是 jQuery Mobile 自 带 的 样式 ，ui-bar 用 于 控制 各 子 容器 的 间距 ，ui-bar-a 用 于 设置 各 子 
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容器 的 主题 样式 。 在 该 <div> 标签 中 还 通过 style 属性 设置 了 内 联 样式 ， 用 于 设置 该 子 容器 的 高 度 。 
本 于 | 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 在 该 页 面 内 容 区 域 创建 的 多 种 
类 型 网 格 布局 ， 效 果 如 图 15-21 所 示 。 


两 列 有 局 第 1 列 两 列 布局 时 2 列 
ETTTAETTTE 
1 EE 再 


四 列 布 。 四 列 布 。。” 四 列 布 。。” 四 列 布 
同 弟 1 由 。 局 第 到。 局 区 3 。 同 可 4 有 | 


五 天 EE 天。 五 到 


布局 。 布局 。 布局 。 布局 。 布 所 
WN 


如 果 容器 选择 样式 为 两 列 ， 即 class 属性 
值 为 ui-grid-a， 而 在 它 的 子 容 器 中 添加 了 3 
个 子 容器 ， 即 class 属性 值 为 ui-block-c， 


cm 那么 第 3 列 将 自动 被 放置 在 下 一 行 中 。 





在 jQuery Mobile 页 面 中 除了 可 以 创建 出 布局 网 格 ， 还 可 以 创建 可 折 世 区 块 。 在 jQuery Mobile 
页 面 中 创建 可 折 世 区 域 需要 通过 以 下 3 个 步骤 。 

(1) 创建 一 个 <div> 容器 ， 将 该 容器 的 data-role 属性 值 设置 为 collapsible， 表 示 该 容器 是 一 个 
可 折 赦 区 块 ， 代 码 如 下 。 


<div data-role="collapsible">…</div> 


(2) 在 容器 中 添加 一 个 <h3> 标题 标签 ， 该 标签 以 按钮 的 形式 展示 。 按 钮 的 左 侧 有 一 个 “+” 号 ， 
表示 该 标题 可 以 展开 。 代 码 如 下 。 


<div data-role="collapsible"> 
<h3> 折 亚 标题 </h3> 
</div> 


(3) 在 标题 的 下 方 放置 需要 折 径 显示 的 内 容 , 通常 使 用 <p> 段落 标签 。 当 用 户 单 击 标题 中 的 “+” 
号 时 ， 显 示 <p> 标签 中 的 内 容 ， 标 题 左 侧 的 “+” 号 变 成 “-” 号 ; 再 次 单 击 时 ， 隐 藏 <p> 标签 中 的 
内 容 ， 标 签 左 侧 的 “-” 号 变 为 “+” 号 。 


<div data-role="collapsible"> 
<h3> 折 双 标题 </h3> 
<p> 折 芭 内 容 </p> 


</div> 
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在 jQuery Mobile 页 面 中 创建 可 折 又 区 块 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 15 章 \15-6-2.html ”视频 : 光盘 \ 视 频 \ 第 15 章 \15-6-2.mp4 


OI 新 建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-6-2.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 ,设置 和 加 载 jQuery Mobile 函数 库 代 码 。 
辆 本 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 头 部 标题 </h1></div> 
<div data-role="content"> 
<div data-role="collapsible"> 
<h3> 关于 我 们 </h3> 
<p> ”工作 室 成 立 于 2014 年 初 ， 在 互动 设计 和 互动 营销 领域 有 着 独特 理解 。 我 们 一 直 专 注 于 
互联 网 整合 营销 传播 服务 ， 以 客户 品牌 形象 为 重 ， 提 供 精确 的 策划 方案 与 视觉 设计 方案 ， 团 队 整体 有 着 国际 化 
意识 与 前 瞻 思 想 ; 以 视觉 设计 创意 带动 客户 品牌 提升 ， 洞 察 互联 网 发 展 趋 势 。</p> 
</div> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


区 3。 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 在 该 页 面 内 容 区 域 创建 的 可 折 
荆 区 块 的 效果 ， 如 图 15-22 所 示 。 单 击 可 折 芭 区 域 的 标题 ， 展 开 显示 可 折 芭 区 域 中 的 内 容 ， 如 
15-23 所 示 。 





图 15-22 图 15-23 


可 折 志 容器 内 的 标题 字体 可 以 在 <h1> 至 <h6> 标签 之 间 选 择 ， 根 据 需要 进行 

设置 。 另 外 ， 在 可 折 芭 容器 中 还 可 以 设置 可 折 芭 容器 的 默认 折 共 状态。 在 可 折 芭 容 

国 器 中 设置 data-collapsed 属性 值 为 rue， 表 示 标 题 下 的 内 容 是 隐藏 的 ， 这 也 是 可 

折 芭 区 块 的 默认 显示 效果 ; 设置 data-collapsed 属性 值 为 false， 表 示 标 题 下 的 内 
容 是 显示 的 ， 即 可 折 县 区 块 是 展开 的 。 
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在 jQuery Mobile 页 面 中 允许 对 可 折 芭 区 块 进行 说 套 显示 ， 即 在 一 个 折 芭 区 块 的 内 容 中 再 添加 一 
个 折 芭 区 块 ， 依 此 类 推 。 但 建议 这 种 谋 套 最 多 不 要 超过 3 层 ， 否 则 用 户 体验 和 页 面 性 能 都 比较 差 。 
对 上 一 节 案 例 中 的 选择 菜单 代码 进行 相应 的 修改 ， 代 码 如 下 。 
<div data-role="content"> 
<div data-role="collapsible"> 
<h3> 关于 我 们 </h3> 
<p> ”工作 室 成 立 于 2014 年 初 ， 在 互动 设计 和 互动 营销 领域 有 着 独特 理解 。 我 们 一 直 专 注 于 
互联 网 整合 营销 传播 服务 ， 以 客户 品牌 形象 为 重 ， 提 供 精确 的 策划 方案 与 视觉 设计 方案 ， 团 队 整 体 有 着 国际 化 
意识 与 前 瞻 思 想 ; 以 视觉 设计 创意 带动 客户 品牌 提升 ， 洞 察 互联 网 发 展 趋势 。</p> 
<div data-role="collapsible"> 
<h4> 我 们 的 荣誉 </h4> 
<p> ”工作 室 作为 互动 设计 和 互动 营销 领域 的 领军 人 物 ， 曾 多 次 获得 国内 外 多 个 设计 大 奖 ， 
并 在 国内 各 大 设计 网 站 中 开辟 有 设计 专栏 ， 向 广大 设计 爱好 者 传授 设计 理念 和 经 验 。</p> 
</div> 
</div> 


</div> 


保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 单 击 “ 关 于 我 们 ”标题 ， 展 开 可 折 直 区 块 ， 
效果 如 图 15-24 所 示 。 单 击 “ 我 们 的 荣誉 ”标题 ， 展 开 嵌 套 的 可 折 芭 区 块 ， 效 果 如 图 15-25 所 示 。 


工作 天 作为 二 全 妇 过 从 条 
前 史 交 共 和 国外 多 个 讼 计 





图 15-24 图 15-25 


在 jQuery Mobile 中 ， 可 折 芭 区 块 中 的 内 容 区 域 可 以 放置 任何 的 HTML 标签 ， 

当然 ， 也 允许 再 添加 一 个 可 折 芭 区 块 ， 从 而 形成 嵌 套 的 可 折 芭 区 块 。 虽然 是 嵌 套 的 
可 折 芭 区 块 ， 但 各 自 的 data-collapsed 属性 是 独立 的 ， 即 每 层 都 可 以 单独 控制 自己 
的 内 容 是 展开 的 还 是 隐藏 的 。 
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可 折 赤 区 块 不 但 可 以 嵌 套 ， 还 可 以 形成 可 折 亚 区 块 组 。 在 可 折 者 区 块 组 中 可 以 包含 多 个 可 折 赤 区 
块 ， 在 同一 时 间 内 ， 可 折 私 区 块 组 中 只 有 一 个 折 私 区 块 是 展开 的 ， 当 展开 组 中 一 个 可 折 芭 区 块 时 ， 其 
中 的 其 他 可 折 径 区 块 将 自动 关闭 。 

实现 可 折 私 区 块 组 的 方法 是 将 多 个 折 私 区 块 放置 在 一 个 <div> 容器 中 ， 并 且 在 该 <div> 标签 中 
添加 data-role="collapsible-set" 属性 设置 。 


在 jQuery Mobile 页 面 中 创建 可 折 又 区 块 组 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 15 章 \15-6-4.html ”视频 : 光盘 \ 视 频 \ 第 15 章 \15-6-4.mp4 


OI 新 建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 15 章 \15-6-4.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设置 和 加 载 jQuery Mobile 函数 库 代码 ， 与 前 面 
案例 相同 。 

国 EB 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 








<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 头 部 标题 </h1></div> 
<div data-role="content"> 
<div data-role="collapsible-set"> 
<div data-role="collapsible" data-collapsed="false" > 
<h3> 网 页 设计 </h3> 
<p><a href="#">Dreamweaver</a></p> 
<p><a href="#">Div+CSS</a></p> 
<p><a href="#">jQuery Mobile</a></p> 
</div> 
<div data-role="collapsible"> 
<h3> 平面 设计 </h3> 
<p><a href="#">Photoshop</a></p> 
<p><a href="#">Illustrator</a></p> 
<p><a href="#">CorelDRAW</a></p> 
</div> 
<div data-role="collapsible"> 
<h3> 三 维 动画 设计 </h3> 
<p><a href="#">3D Max</a></p> 
<p><a href="#">Maya</a></p> 
</div> 
</div> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


国 畏 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 在 可 折 私 区 块 组 中 标题 为 “网 


Qs0 


页 设计 ”的 可 折 霍 区 块 默 认为 展示 的 ， 效 果 如 图 15-26 所 示 。 单 击 组 中 其 他 可 折 又 区 块 标题 时 ， 将 
展开 该 区 块 并 自动 隐藏 其 他 可 折 私 区 块 内 容 ， 如 图 15-27 所 示 。 





全 = 检 册 而 计 


JQuery Moblle 30 Max 
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图 15-26 图 15-27 


可 折 志 区 块 组 中 所 有 的 可 折 双 区 块 的 默认 状态 都 是 收缩 的 ， 如 果 想 在 默认 状态 下 使 某 个 折 芭 区 块 
为 展开 状态 ， 只 需要 将 该 折 翅 区 块 的 data-collapsed 属性 值 设置 为 false， 例 如 在 本 实例 中 ， 将 标 
题 为 “网 页 设计 ”的 折 芭 区 块 的 data-collapsed 属性 值 设 置 为 false。 需 要 注意 的 是 ， 由 于 同 处 于 
一 个 可 折 肥 区 块 组 中 ， 展 开 状 态 的 可 折 芭 区 块 在 同一 时 间 只 人 允许 有 一 个 。 


在 本 章 中 重点 向 读者 介绍 了 jQuery Mobile 页 面 的 相关 知识 ， 一 是 jQuery Mobile 工具 栏 ， 包 
括 头 部 栏 、 导 航 栏 和 尾部 栏 的 创建 和 使 用 方法 ; 二 是 对 jQuery Mobile 页 面 正文 部 分 进行 格式 化 处 
理 的 方法 ， 包 括 网 格 布局 、 可 折 思 区 块 等 内 容 。 通 过 对 本 章 内 容 的 学 习 ， 读 者 需要 能 够 熟悉 jQuery 
Mobile 页 面 的 基本 架构 以 及 各 部 分 内 容 的 设置 和 处 理 方法 。 
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= 本 章 知 识 点 

第 16 章 jQuery Mobile v ne 
页 面 按钮 组 件 的 创建 和 使 用 方法 
人 组 件 MW 认识 各 种 jQuery Mobile 表单 


在 jQuery Mobile 中 提供 了 许多 常用 的 组 件 ， 例 如 通过 超 组 件 
链接 <a> 标签 衍生 出 的 按钮 组 件 、 专 门 针 对 表单 提供 的 各 种 类 掌握 各 种 表单 组 件 的 使 用 和 设 
型 的 表单 组 件 , 以 及 使 用 列表 方式 展示 更 多 内 容 的 列表 组 件 等 。 置 方法 
在 jQuery Mobile 移动 应 用 开发 设计 中 ， 灵 活 运用 这 些 组 件 能 
够 设计 开发 出 更 加 丰富 的 页 面 效果 。 在 本 章 中 将 详细 向 读者 介 Mo 


绍 jQuery Mobile 页 面 中 的 组 件 及 其 使 用 方法 。 的 创建 方法 
MY 掌握 各 种 设置 jQuery Mobile 列 
表 的 方法 和 技巧 


玫 您 一 想 包 陆 亿 曙 名 夫 的 反 关 风 册 无限 风 光 
风 最 本 时 2915108W 
人 2 人 像 摄影 2015,9 更 所 
人 MBS wo 捐 提 入 像 宁 蜗 加， 汗 倍 人 生 美好 


和 


2015.2 更 所 








jQuery Mobile 中 的 按钮 由 两 类 元 素 形成 : 一 类 是 超 链接 <a> 标签 元 素 ， 在 <a> 标签 中 添加 
data-role="button" 属性 设置 ，jQuery Mobile 便 会 自动 为 该 元 素 添 加 相应 的 样式 外 观 ， 形 成 可 单 
击 的 按钮 形状 ; 另 一 类 是 在 表单 中 ， 在 <input> 标签 中 设置 type 属性 为 sumbit、reset、button 或 
image， 都 会 形成 相应 的 按钮 表单 元 素 。 


在 jQuery Mobile 中 ， 被 样式 化 的 按钮 元 素 默认 都 是 块 状 ， 并 且 自 动 填充 页 面 宽度 。 如 果 要 取 
消 默认 效果 ， 只 需要 在 按钮 的 元 素 中 添加 data-inline 属性 ， 将 该 属性 值 设置 为 true ， 该 按钮 将 会 根 
据 其 内 容 中 文字 和 图 片 的 宽度 自动 进行 缩放 ， 形 成 一 个 紧凑 型 的 按钮 。 

如 果 想 要 将 缩放 后 的 按钮 在 同一 行 显示 ， 可 以 在 多 个 按钮 的 外 层 增 加 一 个 <div> 容器 ， 在 该 容 
器 中 将 设置 data-inline 属性 值 为 true， 这 样 就 可 以 使 容器 中 的 按钮 样式 自动 缩放 至 最 小 宽度 ， 并 且 
以 浮动 效果 在 一 行 中 显示 。 

在 内 联 按钮 中 ， 如 果 想 使 两 个 以 上 的 按钮 显示 在 同一 行 ， 且 自动 均 分 页 面 宽 度 ， 可 以 使 用 网 格 分 
栏 的 方式 ， 将 多 个 按钮 放置 在 分 栏 后 的 同一 行 中 。 


在 页 面 中 添加 内 联 按钮 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 16 章 \16-1-1.html ”视频 : 光盘 \ 视 频 \ 第 16 章 \16-1-1.mp4 
























































































































































[GE 新 建 一 个 HTML 5 页面， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-1-1.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 画 
的 案例 相同 。 

节 王 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


























<div id="pagel" data-role="page"> 
<div data-role="header"> 
<h1> 头 部 标题 </h1> 
</div> 
<div data-role="content"> 
<p> 是 否 继续 查看 正文 内 容 ? <p> 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 
<a href="#" data-role="button"” class="ui-btn-active"> 确定 </a> 
</div> 
<div class="ui-block-b"> 
<input type="button" value=" 取消 "> 
</div> 
</div> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


本 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 使 用 分 栏 容器 使 两 个 按钮 显示 
在 同一 行 上 的 效果 ， 如 图 16-1 所 示 。 两 个 按钮 的 宽度 可 以 与 移动 终端 浏览 器 的 宽度 进行 自动 等 比例 
缩放 ， 因 此 适应 移动 终端 不 同 分 辨 率 的 浏览 器 。 
[@E 玫 ”如果 页 面 中 的 按钮 不 与 浏览 器 等 比例 缩放 ， 且 多 个 按钮 也 需要 在 同一 行 中 显示 ， 可 以 在 按钮 
元 素 中 添加 data-inline 属性 设置 ， 设 置 其 属性 值 为 true， 代码 如 下 。 












































<div class="ui-block-a"> 


<a href="#" data-role="button" data-inline="true"” class="ui-btn-active"> 确 定 
</a> 


</div> 

<div class="ui-block-b"> 

<input type="button” value=" 取消 " data-inline="true"> 
</div> 














本 于 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 同 样 可 以 使 两 个 按钮 以 内 联 的 方式 
在 同一 行 中 显示 ， 只 是 由 于 固定 了 宽度 ， 导 致 不 能 与 浏览 器 的 宽度 进行 等 比例 缩放 ， 如 图 16-2 
所 示 。 
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头 部 标题 头 部 标题 


是 否 继续 查看 正文 内 容 ? 是 否 继续 查看 正文 内 容 ? 
确定 取消 确定 取消 

页 半 页 有 

图 16-1 图 16-2 


在 jQuery Mobile 中 ， 多 个 按钮 不 但 能 以 内 联 的 形式 显示 ， 还 可 以 全 部 放 入 按钮 组 ， 即 
controlgroup 容器 中 ， 按 照 垂直 或 水 平方 向 展现 按钮 列表 。 默 认 情况 下 ， 按 钮 组 是 以 垂直 方向 展示 
一 组 按钮 列表 ， 可 以 通过 给 按钮 组 容器 添加 data-type 属性 来 修改 按钮 组 默认 的 显示 方式 。 


在 页 面 中 添加 按钮 组 
最 终 文件 : 光盘 \ 最终 文件 \ 第 16 章 \16-1-2.html 。 视频 : 光盘 \ 视 频 \ 第 16 章 \16-1-2.mp4 





[GE ”新建 一 个 HTML 5 页 面 ， 将 该 文档 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-1-2.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
的 案例 相同 。 

栈 本 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 在 该 页 面 代码 中 ， 创 建 了 
两 种 排列 方式 的 按钮 组 ， 一 种 以 垂直 方向 的 形式 展示 两 个 按钮 ， 另 一 个 以 水 平方 向 的 形式 展示 两 个 
按钮 。 


<div id="pagel" data-role="page"> 
<div data-role="header"> 
<h1> 头 部 标题 </h1> 
</div> 
<div data-role="content"> 
<p> 是 否 继续 查看 正文 内 容 ? <p> 
<div data-role="controlgroup"> 
<a href="#" data-role="button" data-icon="check" class="ui-btn-active"> 
确定 </a> 
<input type="button" value=" 取消 " data-icon="delete"> 
</div> 
<p> 是 否 继续 查看 正文 内 容 ? <p> 
<div data-role="controlgroup" data-type="horizontal"> 
<a href="#" data-role="button" data-icon="check" class="ui-btn-active"> 
确定 </a> 
<input type="button"” value=" 取消 " data-icon="delete"> 


</div> 
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</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


[GE 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 中 两 种 形式 按钮 组 的 效果 ， 
如 图 16-3 所 示 。 


头 部 标题 


是 否 继续 查看 正文 内 容 ? 


四 确定 垂直 排列 按钮 组 
© 取消 
是 否 继续 查看 正文 内 容 ? 
者 取消 一 一 一 一 水 平 排列 按钮 组 
页 肢 
图 16-3 


如 果 按 钮 组 以 水 平 的 方式 显示 按钮 列表 ， 默 认 情 况 下 ， 所 有 按钮 向 左 靠拢 ， 自 
动 缩放 到 各 自 适 合 的 宽度 。 如 果 在 按钮 组 中 仅 放置 一 个 按钮 ， 那 么 该 按钮 仍 是 以 正 
常 的 圆 角 效果 显示 在 页 面 中 。 





在 HTML 中 表单 占有 十 分 重要 的 地 位 。 针 对 表单 ，jQuery Mobile 提供 了 一 套 完全 基于 HTML 
原始 代码 且 适 合 触 摸 操作 的 框架 。 在 该 框架 下 ， 所 有 的 表单 元 素 先 由 原始 的 代码 升级 为 jQuery 
Mobile 组 件 , 然后 调用 各 自 组 件 提供 的 方法 与 属性 , 实现 在 jQuery Mobile 下 表单 元 素 的 各 种 操作 。 

需要 说 明 的 是 ， 在 表单 中 各 元 素 通 过 原始 HTML 代码 升级 为 jQuery Mobile 是 自动 完成 的 ， 当 
然 ， 也 可 以 阻止 这 种 升级 行为 ， 只 要 将 该 表单 元 素 的 data-role 属性 值 设置 为 none 即 可 。 另 外 ， 由 
于 在 单个 页 面 中 可 能 会 出 现 多 个 page 容器 ， 为 了 保证 表单 在 提交 数据 时 的 唯一 性 ， 必 须 确保 同一 个 
jQuery Mobile 页 面 中 每 一 个 表单 元 素 的 id 名 称 是 唯一 的 。 


在 jQuery Mobile 中 ， 文 本 输入 组 件 包括 文本 域 和 HTML 5 中 新 增 的 输入 类 型 。 文 本 输入 组 件 
使 用 标准 的 HTML 原始 元 素 ， 借 助 jQuery Mobile 的 泻 染 效果 ， 使 其 更 易于 触摸 型 使 用 。 另 外 ， 
HTML 5 中 新 增 的 输入 类 型 (如 number 类 型 ) ， 在 jQuery Mobile 中 会 被 显示 成 数字 输入 框 ， 还 
在 输入 框 的 最 右 端 有 两 个 可 调节 大 小 的 “+” 和 “-” 按 钮 , 方便 移动 终端 的 用 户 修改 输入 框 中 的 数字 。 
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添加 不 同类 型 的 文本 输入 组 件 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 16 章 \16-2-1.html 。 视频 : 光盘 \ 视 频 \ 第 16 章 \16-2-1.mp4 


WI 新 建 HTML 5 页 面 ,将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-2-1.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
辆 本 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 

<div data-role="header"><h1> 头 部 标题 </h1></div> 

<div data-role="content"> 
搜索 ; <input type="search" id="search" name="search" Value=""> 
姓名 ; <input type="text" id="uname" name="uname" value=""> 
邮箱 : <input type="email" id="uemail" name="uemail" value=""> 
电话 :; <input type="tel" id="utel" name="utel" value=""> 
年 龄 ; <input type="number" id="unumber" name="unumber" value="0"> 

</div> 

<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


[王国 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 中 文本 输入 组 件 的 效果 ， 
如 图 16-4 所 示 。 


头 部 标题 


搜索 ; 


,，_type 类 型 为 search 的 搜索 表单 , 在 左 侧 显示 搜索 图 标 , 当 输入 内 容 时 ， 
一 在 右 侧 会 出 现 一 个 删除 图 标 ， 单 击 该 图 标 ， 可 以 清空 输入 框 中 的 内 容 。 


Q jQueryMobile 


type 类 型 为 email 和 tel 的 电子 邮件 表单 和 电话 表单 ， 其 显示 的 外 观 效果 与 
type 类 型 为 text 的 文本 域 表单 是 完全 相同 的 。 





p 司 _type 类 型 为 number 的 数字 表单 ， 单 击 最 右 端的 上 下 两 个 调整 按钮 ， 可 以 改 
变数 字 输 入 框 中 的 数值 大 小 。 
页 


图 16-4 


如 果 在 <input> 标签 中 设置 type 属性 值 为 range， 则 可 以 在 页 面 中 创建 一 个 滑 块 组 件 。 在 
jQuery Mobile 中 ， 滑 块 组 件 由 两 部 分 组 成 ， 一 部 分 是 可 调整 大 小 的 数字 输入 框 ， 另 一 部 分 是 可 拖 动 
修改 输入 框 数 字 的 滑动 条 。 滑 块 组 件 可 以 通过 添加 min 和 max 属性 来 设置 滑动 条 的 取 值 范围 ， 例 如 
min 属性 值 为 0，max 属性 值 为 10， 则 表示 该 滑 块 只 能 在 0~10 之 间 进 行 取 值 。 
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添加 滑 块 改变 页 面 元 素 背 景 颜色 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 16 章 \16-2-2.html 。 视频 : 光盘 \ 视 频 \ 第 16 章 \16-2-2.mp4 


[GE 新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-2-2.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
辆 本 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"> 
<h1> 头 部 标题 </h1> 
</div> 
<div data-role="content" id="content"> 
拖 动 滑 块 改变 背景 颜色 : 
<input type="range" id="txtR" value="0" min="0" max="255" 
onChange="setColor()"> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


王国 在 <head> 与 </head> 标签 之 间 编 写 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 

function $$ (id) { 
return document .getElementByid(id); 

} 

function setColor () { 
var setl="rgb("+$("#txtR") .val () +",233,244)"; 
$$ ("content") .style.backgroundColor = setl; 

. 

</script> 


区 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 中 滑 块 组 件 的 效果 ， 如 
16-5 所 示 。 在 页 面 中 拖 动 滑 块 组 件 ， 可 以 看 到 页 面 中 相应 元 素 背景 颜色 变化 的 效果 ， 如 图 16-6 
所 示 。 





头 部 标题 头 部 标题 





拖 动 滑 块 改变 背景 颜色 : 
0 国 
页 脚 
图 16-5 图 16-6 
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拖 动 滑 块 时 改变 的 值 是 数字 输入 框 的 值 ， 而 min 与 max 属性 的 值 是 指定 滑动 条 的 取 值 范围 。 拖 
动 滑 块 或 单 击 数字 输入 框 中 的 “+” 或 “-” 可 以 修改 滑 块 值 。 


在 jQuery Mobile 中 ， 在 <select> 标签 中 设置 data-role 属性 值 为 slider， 可 以 将 该 下 拉 列 
表 元 素 中 的 两 个 <option> 选项 转变 为 一 个 翻转 切换 开关 。 第 一 个 <option> 选项 为 “ 开 ”， 取 值 为 
true 或 1; 第 二 个 <option> 选项 为 “ 关 ”， 取 值 为 false 或 0。 它 是 移动 设备 上 常用 的 Ul 元素 之 一 ， 
常用 于 一 些 系统 默认 值 的 设置 。 

例如 下 面 的 jQuery Mobile 页 面 代码 。 


<select id="slider" data-role="slider"> 
<option value="1"> 开 </option> 


<option value="0"> 关 </option> 





</select> 
在 浏览 器 中 所 显示 的 翻转 切换 开关 效果 如 图 16-7 所 示 。 
头 部 标题 头 部 标题 
天 
页 肢 页 有 
图 16-7 


在 jQuery Mobile 中 ， 单 选 按钮 样式 化 后 更 加 容易 被 点 击 和 触摸 。 在 通常 情况 下 ， 使 用 
<fieldset> 标签 ， 并 在 该 标签 中 设置 data-role 属性 值 为 controlgroup， 使 用 该 标签 包含 所 有 的 
<input> 和 <label> 元 素 ， 这 样 可 以 整个 组 的 形式 样式 化 容器 中 的 全 部 标签 ; 然后 ， 在 组 成 员 结构 中 ， 
在 每 个 <label> 标签 中 添加 for 属性 设置 , 对 应 一 个 类 型 为 radio 的 <input> 元 素 。 为 了 便于 用 户 触 摸 ， 
这 些 <label> 元 素 将 会 被 拉 长 。 


使 用 单 选 按钮 制作 投票 表单 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 16 章 \16-2-4.html 。 视频 : 光盘 \ 视 频 \ 第 16 章 \16-2-4.mp4 


[GE 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-2-4.html”。 在 <head> 


与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
葬 出 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


@ass 


[国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 使 用 单 选 按钮 制作 的 投票 表单 
的 效果 ， 如 图 16-8 所 示 。 


你 最 交欢 的 节日 是 什么 ? 你 最 守 欢 的 下 是 什么 
Ow 

二 国庆 节 

五 一 劳动 节 

双 重 节 

-Ln 





默认 情况 下 ，<fieldset> 标签 中 包含 的 一 组 单 选 按钮 选项 会 以 垂直 方式 显示 ， 
如 果 希 望 单 选 按钮 组 中 的 各 单 选 按钮 选项 以 水 平 的 方式 进行 排列 ， 可 以 在 <fieldset> 
标签 中 添加 data-type="horizontal” 属 性 设置 。 





与 单 选 按钮 相 类 似 ， 使 用 <fieldset> 标签 ， 并 在 该 标签 中 添加 data-role="controlgroup" 属 
性 设置 ， 包 括 多 个 复 选 框 。 通 常情 况 下 ， 多 个 复 选 框 选项 组 合成 的 复 选 框 组 放置 在 标题 下 面 ， 通 过 
jQuery Mobile 固有 的 样式 自动 删除 各 个 复 选 框 选项 间 的 间距 ， 使 其 看 起 来 更 像 一 个 整体 。 另 外 ， 复 
选 框 选项 组 默认 是 垂直 显示 ， 也 可 以 在 <fieldset> 标签 中 添加 data-type 属性 设置 ， 设 置 该 属性 的 
属性 值 为 horizon， 将 其 改变 为 水 平 显 示 。 如 果 水 平 显示 复 选 框 组 中 的 各 选项 ， 将 自动 隐藏 各 个 复 选 
框 的 图 标 ， 并 浮动 成 一 排 显示 。 


使 用 复 选 框 制作 调查 表单 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 16 章 \16-2-5.html 。 视频 : 光盘 \ 视 频 \ 第 16 章 \16-2-5.mp4 


[GE 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-2-5.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
节 到 在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 调查 表单 </h1></div> 
<div data-role="content"> 

<p> 你 参加 过 哪些 社会 公益 活动 ? </p> 

<fieldset data-role="controlgroup"> 
<input type="checkbox" name="chkA" id="chkl" value="1"> 
<label for="chk1"> 环境 保护 </label> 
<input type="checkbox" name="chkA" id="chk2" value="2"> 
<label for="chk2"> 紧急 援助 </label> 
<input type="checkbox" name="chkA" id="chk3" value="3"> 
<label for="chk3"> 知识 传播 </label> 
<input type="checkbox" name="chkA" id="chk4" value="4"> 
<label for="chk4"> 社会 治安 </label> 

</fieldset> 

<div class="ui-grid-a"> 
<div class="ui-block-a"> 

<a href="#" data-role="button" class="ui-btn-active"> 投票 </a> 

</div> 
<div class="ui-block-b"> 
<input type="button” value=" 查看 结果 "> 
</div> 


</div> 
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</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


[ga 一。 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 使 用 单 选 按钮 制作 的 调查 表单 
的 效果 ， 如 图 16-9 所 示 。 


调查 表单 调查 表单 

你 参加 过 哪些 社会 公益 活动 ? 你 参加 过 万 些 社 会 公益 活动 了 
环境 保护 环境 保护 
紧急 援助 思 紧急 援助 
知识 传播 知识 传播 
社会 治安 社会 治安 

页 服 页 局 

图 16-9 


与 单 选 按钮 和 复 选 框 不 同 ， 使 用 <select> 标签 形成 的 选择 菜单 在 jQuery Mobile 中 样式 发 生 了 
很 大 的 变化 。 它 分 为 两 种 类 别 : 一 种 是 原生 菜单 类 型 ， 这 种 类 型 继续 保持 了 原来 PC 端 浏 览 器 的 样式 ， 
单 击 右 端的 向 下 箭头 出 现 一 个 下 拉 列 表 ， 选 择 其 中 的 某 一 选项 ， 另 一 种 类 型 是 自 定义 菜单 类 型 ， 该 类 
型 专用 于 移动 设备 的 浏览 器 显示 ， 使 用 该 类 型 时 ，jQuery Mobile 中 提供 的 自 定义 菜单 样式 将 取代 原 
始 选择 菜单 的 样式 ， 使 选择 菜单 在 显示 时 发 生变 化 。 

需要 创建 自 定义 菜单 类 型 非常 简单 ， 只 需要 在 <select> 标签 中 添加 data-native-menu 属性 设 
置 ， 设 置 该 属性 的 属性 值 为 false， 即 可 将 该 选择 菜单 转换 成 为 自 定义 菜单 类 型 。 

自 定义 类 型 的 菜单 由 按钮 和 菜单 两 部 分 组 成 ， 当 用 户 单 击 按钮 时 ， 对 应 的 菜单 选择 器 将 会 自动 打 
开 ， 选 其 中 某 一 选项 后 ， 菜 单 自动 关闭 。 


使 用 自 定义 类 型 选择 菜单 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 16 章 \16-2-6.html 。” 视频 : 光盘 \ 视 频 \ 第 16 章 \16-2-6.mp4 


[GE 新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-2-6.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
辐 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 自 定义 类 型 选择 菜单 </h1></div> 
<div data-role="content"> 
<p> 请 选择 注册 时 间 : </p> 
<fieldset data-role="controlgroup"> 


<select name="selY" id="selY" data-native-menu="false"> 
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<option> 选择 年 份 </option> 
<option value="2014">2014 年 </option> 
<option value="2015">2015 年 </option> 
</select> 
<select name="selM" id="selM" data-native-menu="false"> 
<option> 选择 月 份 </option> 
<option value="1">1 月 </option> 
<option value="2">2 月 </option> 
<option value="3">3 月 </option> 
<option value="4">4 月 </option> 
<option value="5">5 月 </option> 
<option value="6">6 月 </option> 
<option value="7">7 月 </option> 
<option value="8">8 月 </option> 
<option value="9">9 月 </option> 
<option value="10">10 月 </option> 
<option value="11">11 月 </option> 
<option value="12">12 月 </option> 
</select> 
</fieldset> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


将 两 个 选择 菜单 使 用 <fieldset> 标签 所 包含 ， 并 且 在 <fieldset> 标签 中 添加 
data-role="controlgroup'" 属性 设置 ， 因 此 两 个 选择 菜单 以 一 个 整体 组 的 形式 显示 
在 页 面 中 。 在 选择 菜单 <select> 标签 中 添加 data-native-menu 属性 设置 ， 设 置 
该 属性 值 为 false， 即 可 将 选择 菜单 转变 成 一 个 自 定义 类 型 的 选择 菜单 。 


国 5 ”保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 默认 垂直 排列 的 自 定义 选择 菜 
单 的 效果 ， 如 图 16-10 所 示 。 如 果 希 望 水 平 排列 自 定义 选择 菜单 ， 可 以 在 <fieldset> 标签 中 添加 
data-type="horizontal" 属性 设置 ， 效 果 如 图 16-11 所 示 。 单 击 自 定义 选择 菜单 元 素 ， 可 以 在 弹出 
的 窗口 中 选择 需要 的 选项 ， 如 图 16-12 所 示 。 





自 定义 类 型 选择 菜单 
自 定义 类 型 选择 菜单 自 定义 类 型 选择 菜单 
请 选择 注册 时 间 : 
选择 年 份 @@ 放生 择 注册 时 间 : 选择 年 份 
选择 月 份 © 选择 年 份 全 。 选择 月 价 回 2014 年 BR Pa © 
2015 年 
页 脚 页 脚 项 肢 
图 16-10 图 16-11 图 16-12 
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与 原生 的 页 面 中 的 选择 菜单 不 同 ，jQuery Mobile 中 的 选择 菜单 还 可 以 通过 设置 multiple 属性 ， 
实现 菜单 的 多 项 选择 。 如 果 将 某 个 选择 菜单 的 multiple 属性 值 设置 为 rue， 单 击 该 按钮 弹出 的 菜单 
对 话 框 中 ， 全 部 菜单 选项 的 右 侧 将 会 出 现 一 个 可 勾 选 的 复 选 框 ， 用 户 通过 单 击 该 复 选 框 ， 可 以 选中 任 
意 多 个 选项 。 选 择 完成 后 ， 单 击 左上 角 的 “关闭 ”按钮 ， 已 弹出 的 对 话 框 关闭 ， 对 应 的 按钮 自动 更 新 


为 用 户 所 选择 的 多 项 内 容 值 。 
例如 ， 对 上 一 节 案例 中 的 选择 菜单 代码 进行 相应 的 修改 ， 代 码 如 下 。 


<fieldset data-role="controlgroup"> 


<select name="selY" id="selY" data-native-menu="false" multiple="true"> 


<option> 选择 年 份 </option> 

<option value="2014">2014 年 </option> 

<option value="2015">2015 年 </option> 
</select> 


<select name="selM" id="selM" data-native-menu="false" multiple=” true” > 


<option> 选择 月 份 </option> 
<option value="1">1 月 </option> 
<option value="2">2 月 </option> 
<option value="3">3 月 </option> 
<option value="4">4 月 </option> 
<option value="5">5 月 </option> 
<option value="6">6 月 </option> 
<option value="7">7 月 </option> 
<option value="8">8 月 </option> 
<option value="9">9 月 </option> 
<option value="10">10 月 </option> 
<option value="11">11 月 </option> 
<option value="12">12 月 </option> 
</select> 
</fieldset> 


保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 单 击 页 面 中 的 选择 菜单 ， 在 弹出 的 选项 对 话 


框 中 可 以 选择 多 个 选项 ， 如 图 16-13 所 示 。 


自 定义 类 型 选择 菜单 自 定义 类 型 选择 菜单 
请 选择 注册 时 3 选择 年 从 请 选择 注册 对 间 : 
1 2014 年 :® 2014 年 , 2015 年 2 四 
2015 年 © 2 月 , 3 月 , 4 月 , 5 月 ‘© 
页 肢 页 及 
图 16-13 
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在 用 户 选 择 后 ， 多 项 选择 菜单 对 应 的 按钮 中 不 仅 会 显示 所 选择 的 内 容 值 ， 而 且 
选择 超过 两 个 选项 时 ， 在 下 拉 图 标的 左 侧 还 会 显示 一 个 圆 角 和 矩形 框 ， 在 该 圆 角 和 矩形 
框 中 显示 用 户 所 选择 的 选项 总 数 。 另 外 , 在 弹出 的 选项 对 话 框 中 , 选择 某 一 个 选项 后 ， 

对 话 框 不 会 自动 关闭 ， 必 须 单 击 左上 角 的 “关闭 ”按钮 ， 才 算 完成 一 次 菜单 的 选择 。 


在 jQuery Mobile 中 ， 如 果 在 <ul> 标签 中 设置 data-role 属性 值 为 listview， 便 可 以 创建 一 
个 无 序列 表 ， 并 且 将 会 使 用 jQuery Mobile 的 默认 样式 对 列表 进行 泻 染 显示 。 默 认 情 况 下 ，jQuery 
Mobile 页 面 中 的 列表 宽度 与 屏幕 进行 等 比例 缩放 ， 在 列表 选项 的 最 右 侧 会 显示 一 个 带 箭头 的 图 标 。 
另外 ， 列 表 还 有 许多 种 类 ， 如 基本 列表 、 谱 套 列表 、 编 号 列表 等 ， 同 时 ， 还 可 以 对 列表 中 选项 的 内 容 
进行 分 割 与 格式 化 。 


在 jQuery Mobile 页 面 中 ， 一 个 <ul> 元 素 一 旦 被 定义 为 列表 ，jQuery Mobile 将 会 使 用 默认 的 
样式 对 该 列表 进行 泻 染 显示 ， 列 表 中 的 选项 非常 易于 触摸 。 如 果 单 击 列表 选项 ， 将 会 通过 AJAX 的 方 
式 异 步 请 求 一 个 对 应 的 URL 地 址 ， 并 在 DOM 中 创建 一 个 新 的 页 面 ， 借 助 默认 的 切换 效果 进入 该 页 
面 中 。 


创建 jQuery Mobile 页 面 基本 列表 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 16 章 \16-3-1.html ”视频 : 光盘 \ 视 频 \ 第 16 章 \16-3-1.mp4 


[GE 新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-3-1.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
葬 峡 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1l> 基本 列表 </h1></div> 
<div data-role="content"> 
<p> 精彩 内 容 列表 </p> 
<ul data-role="listview"> 
<1i><a href="#"> 电影 大 片 </a></1i> 
<1i><a href="#"> 热 播 电 视 剧 </a></1i> 
<1i><a href="#"> 精彩 综艺 </a></1i> 
<1i><a href="#"> 网 络 剧 </a></1i> 
</ul> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 
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葬 畏 | 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 jQuery Mobile 页 面 中 默认 的 
基本 列表 效果 ， 如 图 16-14 所 示 。 


基本 列表 

精彩 内 容 列 表 

电影 大 片 © 
热 播 电视 剧 © 
精彩 综艺 © 
网 络 剧 © 

页 肢 
图 16-14 


jQuery Mobile 通过 自 带 的 样式 对 <ul> 元 素 进行 泻 染 ， 使 列表 中 的 各 选项 
拉 长 ， 更 加 容易 触摸 。 选 项 右 侧 的 圆 形 带 箭头 的 图 标 提示 用 户 该 选项 有 链接 。 单 
击 时 ， 通 过 切换 页 面 的 方式 ， 跳 转 到 各 选项 <a> 标签 中 href 属性 所 设置 的 链接 
页 面 中 。 





与 <ul> 无 序列 表 元 素 相 对 应 ， 使 用 <ol> 标签 可 以 创建 一 个 有 序 的 列表 。 在 有 序列 表 中 ， 借 助 
排列 的 编号 顺序 可 以 展现 一 种 有 序 的 列表 效果 。 

在 有 序列 表 显示 时 ，jQuery Mobile 会 优先 使 用 CSS 样式 给 列表 添加 编号 。 如 果 浏 览 器 不 支持 
这 种 CSS 样式 ，jQuery Mobile 将 会 调用 JavaScript 中 的 方法 向 列表 写 入 编号 ， 以 确保 有 序列 表 的 
效果 可 以 兼容 各 种 浏览 器 。 

例如 ， 对 上 一 节 案例 中 的 选择 菜单 代码 进行 相应 的 修改 ， 代 码 如 下 。 


<ol data-role="listview"> 
<1i><a href="#"> 电影 大 片 </a></1i> 
<1i><a href="#"> 热 播 电视 剧 </a></1i> 
<1i><a href="#"> 精彩 综艺 </a></1i> 
<1i><a href="#"> 网 络 剧 </a></1i> 
</ol> 


保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 jQuery Mobile 页 面 中 默认 的 有 序 
列表 效果 ， 如 图 16-15 所 示 。 
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有 序列 表 


精彩 内 容 列 表 
1， 电影 大 片 © 
2、 热 播 电视 剧 © 
3， 精 彩 综艺 © 
4 网 络 剧 © 
页 肢 
图 16-15 


jQuery Mobile 全 面 支持 HTML 5 的 新 特征 和 属性 ， 原 则 上 在 <ol> 标签 中 可 
以 使 用 start 属性 设置 有 序列 表 的 起 始 数字 ， 但 是 jQuery Mobile 考虑 到 浏览 器 的 兼 
容 性 ， 对 该 属性 暂 不 支持 。 此 外 ，<ol> 标签 中 的 type 和 compact 属性 在 HTML 5 

中 不 建议 使 用 ， 且 jQuery Mobile 对 这 两 个 属性 也 不 支持 。 


在 jQuery Mobile 的 列表 中 ， 有 时 需要 对 选项 内 容 做 两 个 不 同 的 操作 ， 这 时 需要 对 选项 中 的 链接 
按钮 进行 分 割 。 实 现 分 割 的 方法 非常 简单 ， 只 需要 在 <li> 标签 中 再 添加 一 个 <a> 标签 ， 便 可 以 在 页 
面 中 实现 分 割 的 效果 。 

分 割 后 的 两 部 分 之 间 通 常 有 一 条 竖 直 的 分 割 线 ， 分 割 线 左 侧 为 缩短 长 度 后 的 选项 链接 按钮 ， 右 
侧 为 后 来 增加 的 <a> 元 素 。 该 元 素 的 显示 效果 只 是 一 个 带 图 标的 按钮 ， 可 以 通过 设置 <ul> 标签 中 
data-split-icon 属性 的 值 ， 来 改变 该 按钮 中 的 图 标 。 


实现 列表 选项 的 分 割 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 16 章 \16-3-3.html 。 视频 : 光盘 \ 视 频 \ 第 16 章 \16-3-3.mp4 


[GE 新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-3-3.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
[王国 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1l> 列表 选项 分 割 </h1></div> 
<div data-role="content"> 
<ul data-role="]listview" data-split-icon="gear" data-split-theme="d"> 
xi> 
<a href="#"> 

<img src="images/163301.png"> 
<h3> 设计 理念 </h3> 
<p> 领先 的 设计 理念 ， 创 造 前 沿 思想 </p> 
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</a> 
<a href="#" data-rel="dialog" data-transition="slideup"> 设计 文章 </a> 
</li> 
<1i> 
<a href="#"> 
<img src="images/163302.png"> 
<h3> 精彩 作品 </h3> 
<p> 精美 设计 作品 ， 涉 取 设 计 精 华 </p> 
</a> 
<a href="#" data-rel="dialog" data-transition="slideup"> 设计 图 片 </a> 
</1i> 
</ul> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


国保 存 页 面 ,在 Opera Mobile 模 拟 器 中 预览 该 页 面 ,可 以 看 到 分 割 列表 选项 的 效果 ,如 图 16-16 所 示 。 





列表 选项 分 害 
设计 理念 © 
领先 的 设计 理念 ， 创 造 前 沿 思想 
精彩 作品 © 
精美 设计 作品 ， 涉 取 设 计 精 华 
页 肢 
图 16-16 


向 <li> 标签 中 多 添加 一 个 <a> 标签 后 ， 便 可 以 通过 一 条 分 割 线 将 列表 选项 中 的 
链接 按钮 分 割 成 两 个 部 分 。 其 中 ， 分 割 线 左 侧 区 域 的 宽度 可 以 随 着 移动 终端 设备 分 
状 率 的 不 同 进行 等 比例 缩放 ; 而 右 侧 区 域 仅 是 一 个 只 有 图 标的 链接 按钮 ， 它 的 宽度 


是 自动 适应 且 固 定 不 变 的 。 
a 目前 在 jQuery Mobile 中 , 列表 中 的 分 割 只 支持 分 割 成 两 部 分 , 即 在 <li> 元 素 中 ， 
只 允许 有 两 个 <a> 标签 出 现 ， 如 果 添 加 两 个 以 上 的 <a> 标签 ， 会 将 最 后 一 个 元 素 作 
为 分 割 线 右 侧 部 分 。 
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在 jQuery Mobile 中 ， 除 了 可 以 分 割 列表 项 外 ， 还 可 以 对 列表 进行 分 类 ， 即 在 列表 中 ， 通 过 分 割 
项 将 各 类 的 列表 组 织 起 来 ， 形 成 相互 独立 的 同类 列表 组 ， 组 的 下 面 是 一 个 个 列表 项 。 

实现 列表 项 分 组 的 方法 很 简单 ， 只 需要 在 分 组 的 位 置 增加 一 个 <li> 元 素 ， 并 在 该 标签 中 添加 da 一 
ta-role="list-divider" 属性 设置 ， 表 示 该 <li> 标签 是 一 个 分 组 列表 项 。 默 认 情况 下 ， 普 通 列 表 项 的 主 
题 色 为 “ 浅 灰 色 ”, 分 组 列表 项 的 主题 色 为 “灰色 ”, 两 者 通过 主题 颜色 的 区 别 , 形成 层次 上 的 包含 效果 。 


实现 列表 选项 的 分 组 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 16 章 \16-3-4.html 。 视频 : 光盘 \ 视 频 \ 第 16 章 \16-3-4.mp4 


[CE 新 建 HTML 5 页面， 将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-3-4.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
EE 玫 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1l> 列表 项 分 组 </h1></div> 
<div data-role="content"> 
<ul data-role="listview"> 
<li data-role="1list-divider"> 电影 大 片 </1i> 
<1i><a href="#"> 欧美 电影 </a></1i> 
<1i><a href="#"> 日 韩 电影 </a></1i> 
<1i><a href="#"> 国产 电影 </a></1i> 
<1i data-role="list-divider"> 热 播 电视 剧 </1i> 
<1i><a href="#"> 卫视 热 播 </a></1i> 
<1i><a href="#"> 国外 电视 剧 </a></1i> 
</ul> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


栈 5 峡 ”保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 列表 选项 分 组 的 效果 ， 如 图 
16-17 所 示 。 如 果 在 <ul> 标签 中 添加 data-divider-theme="b" 属性 设置 ， 可 以 改变 默认 的 分 组 列 
表 项 的 主题 颜色 ， 如 图 16-18 所 示 。 


列表 项 分 组 列表 项 分 组 
欧美 电影 @ 欧美 电影 © 
日 韩 电影 © 日 韩 电影 © 
国产 电影 © 国产 电影 © 
man 
卫视 热 播 © 卫视 热 播 他 
国外 电视 剧 © 国外 电视 剧 @ 
页 肝 页 有 
图 16-17 图 16-18 


G398 





用 ， 且 在 一 个 列表 中 不 宜 过 多 使 用 列表 项 分 组 ， 每 一 个 列表 项 分 组 中 的 列表 数量 不 


对 列表 项 进行 分 组 的 作用 只 是 将 列表 中 的 选项 内 容 进行 分 类 归纳 ， 因 此 不 要 小 
国 | :2 


在 jQuery Mobile 的 列表 <ul> 或 <ol> 标签 中 , 如 果 将 一 个 图 片 作为 <li> 元 素 中 的 第 一 个 子 元 素 ， 
那么 该 图 片 元 素 将 自动 缩放 成 一 个 边 长 为 80 像素 的 正方 形 作 为 图 片 的 缩 略 图 。 

但 是 如 果 将 图 片 作为 列表 项 的 图 标 使 用 ， 则 需要 为 该 元 素 添 加 类 别 属性 ui-li-icon， 才 能 在 列 
表 的 最 左 侧 正常 显示 该 图 标 。 另 外 ， 如 果 想 在 列表 项 中 的 最 右 侧 显 示 一 个 计数 器 ， 只 需要 添加 一 个 
<span> 标签 ， 并 在 该 标签 中 添加 类 别 属 性 ui-li-count 即 可 。 


为 列表 项 添加 图 标 和 计数 器 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 16 章 \16-3-5.html 视频: 光盘 \ 视 频 \ 第 16 章 \16-3-5.mp4 


[GE 新 建 HTML 5 页面， 将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-3-5.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代码 , 与 前 面 的 案例 相同 。 
国 岂 在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 页 面 代码 。 





<div id="pagel" data-role="page"> 
<div data-role="header"><hl> 标题 </h1></div> 
<div data-role="content"> 
<h2> 人 个 中 心 </h2> 
<ul data-role="listview"> 
<1i> 
<a href="#"> 
<img src="images/163501.gif" class="ui-li-icon"> 
收 到 的 留言 
<span class="ui-li-count">5</span> 
</a> 
</1i> 
<11> 
<a href="#"> 
<img src="images/163502.gif" class="ui-li-icon"> 
收 到 的 邮件 
<span class="ui-li-count">12</span> 
</a> 
</1i> 
</u1> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 
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国 畏 ”保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 为 列表 选项 添加 图 标 和 计数 器 
的 效果 ， 如 图 16-19 所 示 。 


标题 
人 个 中 心 
加 收 到 的 留言 5© 
说 收 到 的 邮件 20 
页 肢 
图 16-19 


在 使 用 图 片 作为 列表 项 的 图 标 时 , 尽量 选择 尺寸 较 小 的 图 片 , 如 果 图 标尺 寸 过 大 ， 
虽然 也 会 进行 缩放 , 但 可 能 会 与 图 标 右 侧 的 标题 部 分 不 协调 , 从 而 影响 到 用 户 的 体验 。 
另外 , 如 果 计数 器 <span> 标签 中 显示 的 内 容 过 长 , 该 元 素 将 会 自动 向 左 侧 进行 拉 伸 ， 
直到 完全 显示 为 止 。 





jQuery Mobile 支持 以 HTML 语义 化 的 元 素 (如 <span>、<h>、<p> ) 显示 列表 中 所 需 的 内 容 
格式 。 通 常情 况 下 ， 使 用 <h1> 至 <h6> 标签 来 突显 列表 项 中 显示 的 内 容 ， 使 用 <p> 标签 减弱 列表 
项 中 显示 的 内 容 ， 两 者 结合 ， 可 以 使 列表 项 中 显示 的 内 容 具 有 层次 关系 。 如 果 要 增加 补充 信息 ， 例 如 
日 期 ， 可 以 在 显示 的 <p> 标签 中 添加 类 别 属性 ui-li-aside。 


格式 化 列表 项 内 容 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 16 章 \16-3-6.html 。 视频 : 光盘 \ 视 频 \ 第 16 章 \16-3-6.mp4 


[GE ”新建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 16 章 \16-3-6.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 的 案 
例 相同 。 

国 B 蜀 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 

一” 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 对 列表 项 内 容 进行 格式 化 处 理 
的 效果 ， 如 图 16-20 所 示 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 摄影 作品 列表 </h1></div> 
<div data-role="content"> 
<ul data-role="listview" data-divider-theme="b"> 
<li data-role="]list-divider"> 
2015 年 摄影 作品 


<span class="ui-li-count">2</span> 
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摄影 作品 列表 
2015 年 援 影 作品 












2015.10 更 新 
风景 摄影 
冲 入 一 直人 了 世界 各 寺 的 如 关怀 果 ,无 阳光- 


2015.9 更 新 
人 银 巴 影 村 
om .4 


20152 更 大 





获奖 作品 
2014 年 度 获奖 揪 影 作品 ， 体 驻 揪 影 多 力 





一 通过 对 列表 项 中 的 内 容 进行 格式 
We © 国 化 处 理 ， 可 以 将 大 量 的 信息 层次 清晰 
有 地 显示 在 jQuery Mobile 页 面 中 。 


图 16-20 
如 果 想 使 用 搜索 方式 过 滤 列 表 项 中 的 标题 内 容 ， 可 以 在 “ul> 标签 中 添加 data-filter 属性 设置 ， 


设置 该 属性 的 属性 值 为 rue，jQuery Mobile 将 会 在 列表 的 上 方 自动 添加 一 个 搜索 框 。 当 用 户 在 搜索 
框 中 输入 相应 的 内 容 后 ，jQuery Mobile 将 会 自动 过 滤 掉 不 包含 搜索 字符 内 容 的 列表 项 。 



































本 章 重点 向 读者 介绍 了 jQuery Mobile 中 的 按钮 组 件 、 表 单 组 件 和 列表 组 件 的 创建 和 设置 方法 ， 
结合 实例 的 制作 ， 使 读者 能 够 在 jQuery Mobile 页 面 中 灵活 地 运用 各 种 组 件 。 完 成 本 章 内 容 的 学 习 ， 
读者 需要 掌握 jQuery Mobile 中 各 种 重要 组 件 的 使 用 方法 和 技巧 。 
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第 人 7 章 使 用 jQuery ae 全 


Vv 


日 特点 
M (@] b | | 所 主题 MW 掌握 应 用 jQuery Mobile 默认 


主题 是 指 一 个 Web 站 点 或 应 用 程序 的 外 观 ， 是 最 直接 面 主题 的 方法 
对 用 户 的 操作 界面 , 关系 到 用 户 的 最 终 体验 , 其 重要 性 不 言 而 喻 。 ~ 掌握 修改 默认 主题 的 方法 
在 jQuery Mobile 中 为 用 户 提 供 了 多 种 不 同 风格 的 主 


使 用 户 可 以 轻松 地 创建 出 不 同 主题 的 jQuery Mobile 
章 将 向 读者 介绍 有 关 jQuery Mobile 主题 的 知识 。 


题 预 设 ， 掌握 自 定义 jQuery Mobile 页 
页 面 。 本 面 和 工具 栏 主题 的 方法 
~ 掌握 使 用 ThemeRoller 创建 主 


RapidWeavens 


了 





在 jQuery Mobile 中 ， 由 于 每 一 个 页 面 中 的 布 

















局 和 组 件 都 被 设计 成 一 个 全 新 的 面向 对 象 的 CSS 














E 架 ， 整 个 站 点 或 应 用 的 视觉 风格 可 以 通过 这 个 框架 得 到 统一 。 统 一 后 的 视觉 设计 主题 称 为 jQuery 


Mobile 主题 样式 系统 ， 它 主要 有 以 下 几 个 特点 。 
。 轻 量 级 的 文件 


























在 jQuery Mobile 中 全 面 支持 CSS 3 和 HTML 5， 页 面 中 的 圆 角 、 阴 影 、 渐 变 颜色 和 动画 过 渡 
效果 等 都 是 通过 CSS 3 和 HTML 5 来 实现 的 ， 而 没有 使 用 图 片 ， 大 大 减轻 了 服务 器 的 负担 。 





。 轻 量 级 的 图 标 








在 整个 jQuery Mobile 主题 框架 中 ， 使 用 了 一 套 简化 的 图 标 集 ， 它 包含 了 绝 大 部 分 在 移动 设备 中 














使 用 的 图 标 ， 极 大 减轻 了 服务 器 对 图 标 处 理 的 负荷 。 
。 灵活 的 主题 





























jQuery Mobile 主题 框架 系统 提供 了 多 套 可 供 选 择 的 主题 和 色调 , 并 且 每 套 主 题 之 间 都 可 以 混搭 ， 














丰富 jQuery Mobile 页 面 的 视觉 设计 效果 。 
e 便捷 的 自 定 义 主题 











在 jQuery Mobile 页 面 中 除了 可 以 使 用 系统 框架 提供 的 主题 外 ， 还 允许 开发 者 自 定义 主题 框架 ， 








从 而 实现 jQuery Mobile 页 面 设计 的 多 样 性 。 





























从 以 上 jQuery Mobile 页 面 的 主题 特点 不 难看 出 ，jQuery Mobile 中 每 个 应 用 程序 或 组 件 都 提供 

















了 文件 轻巧 、 样 式 丰富 、 处 理 便捷 的 样式 主题 ， 极 大 方便 了 开发 人 员 的 使 用 。 





移动 联网 之 路 HTML 5+CSS 3HQuery Mobile APP 与 移动 网 站 设计 从 入 门 到 精通 


在 jQuery Mobile 中 ， 组 件 和 页 面 布局 的 主题 定义 是 通过 使 用 一 套 完整 的 CSS 样式 来 实现 的 ， 
在 这 套 CSS 样式 中 包括 两 个 重要 组 成 部 分 。 


e 结构 
用 于 控制 元 素 的 屏幕 中 显示 的 位 置 、 填 充 效果 、 内 外 边 距 等 。 
。 主题 


用 于 控制 元 素 的 颜色 、 渐 变 、 字 体 、 贺 角 、 阴 影 等 视觉 效果 ， 并 包含 了 多 套色 板 ， 每 套色 板 中 都 
定义 了 列表 项 、 按 钮 、 表 单 、 工 具 栏 、 内 容 块 、 页 面 的 全 部 视觉 效果 。 

在 jQuery Mobile 中 ，CSS 样式 中 的 结构 和 主题 是 分 离 的 ， 因 此 只 要 定义 一 套 CSS 样式 就 可 
以 反复 与 一 套 或 多 套 主题 配合 或 混合 使 用 ， 从 而 实现 页 面 布局 和 组 件 主题 多 样 化 的 效果 。 


根据 jQuery Mobile 版 本 的 不 同 ， jQuery Mobile 所 提供 的 默认 页 面 主题 也 有 所 不 同 ， 目 前 提 
供 的 最 新 的 jQuery Mobile 1.4.5 版 本 中 提供 了 两 套 主题 样式 ， 分 别 使 用 字母 a 和 b 进行 引用 。 而 在 
jQuery Mobile 1.1.1 版 本 中 提供 了 5 套 主题 样式 ， 分 别 使 用 字母 a、b、c、d 和 e 进行 引用 。 

除了 可 以 使 用 系统 提供 的 主题 样式 外 ， 开 发 者 还 可 以 很 方便 地 修改 系统 主题 中 的 各 类 属性 值 ， 并 
快捷 地 自 定义 属于 自己 的 主题 。 

在 默认 情况 下 ，jQuery Mobile 中 头 部 栏 与 尾部 栏 的 主题 是 a 字母 ， 因 为 a 字母 代表 最 高 的 视觉 
效果 。 如 果 需 要 改变 某 组 件 或 容器 当前 的 主题 ， 只 需要 将 它 的 data-theme 属性 值 设 置 成 主题 对 应 
的 样式 字母 即 可 。 


jQuery Mobile 页 面 默认 主题 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 17 章 \17-2-1.html ”视频 : 光盘 \ 视 频 \ 第 17 章 \17-2-1.mp4 


[aa 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 17 章 \17-2-1.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 1.4.5 函数 库 代 码 。 


<head> 

<meta charset="utf-8"> 

<title>jQuery Mobile 页 面 默 认 主题 </title> 

<meta name="viewport" content="width=device-width,initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery. 
mobile-1.4.5.min.css" /> 

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. 
js"></script> 


</head> 


[到 玫 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 
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<div id="pagel" data-role="page" data-theme="a"> 
<div data-role="header"><h1> 默认 主题 a</h1></div> 
<div data-role="content"> 
<p> 正文 内 容 </p> 
<a href="#" data-role="button"> 按钮 </a> 
<p><a href="#pagel"> 查看 主题 a 效果 </a></p> 
<p><a href="#page2"> 查看 主题 b 效果 </a></p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
<div id="page2" data-role="page" data-theme="b"> 
<div data-role="header"><h1> 默认 主题 b</h1></div> 
<div data-role="content"> 
<p> 正文 内 容 </p> 
<a href="#" data-role="button"> 按钮 </a> 
<p><a href="#pagel"> 查看 主题 a 效果 </a></p> 
<p><a href="#page2"> 查看 主题 b 效果 </a></p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


一 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 默认 主题 a 的 效果 ， 如 图 17-1 
所 示 。 单 击 页 面 中 的 “查看 主题 b 效果 ”文字 链接 ， 跳 转 到 默认 主题 b 的 效果 页 面 ， 可 以 看 到 默认 主 
题 b 的 效果 ， 如 图 17-2 所 示 。 








上 默认 主题 a 
正文 内 容 
按钮 
查看 主题 3 效果 
查看 主题 b 效 果 
页 肢 
图 17-1 图 17-2 


[加 国 在 <head> 与 </head> 标签 之 间 加 载 jQuery Mobile 1.1.1 函数 库 代码 。 


<head> 

<meta charset="utf-8"> 

<title>jQuery Mobile 页 面 默 认 主 题 </title> 

<meta name="viewport" content="width=device-width,initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery. 


mobile-1.1.1.min.css" /> 
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<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min. 
js"></script> 


</head> 


[王国 在 jQuery Mobile 1.1.1 函数 库 中 提供 了 5 种 主题 样式 ， 如 图 17-3 所 示 。 


正文 内 容 


直 大 主客 3 效果 
查看 主题 b 效 果 
到 委 主 题 c 效 寺 
天 要 主题 d 如 于 
查看 主格 e 效 时 





默认 主题 c 默认 主题 d LE 


正文 内 容 正文 内 容 正文 内 容 

查看 主要 3 效果 查看 主题 3 效果 查看 主题 a 效果 
查看 主题 b 效 果 查看 主题 b 效 果 查看 主题 b 效 果 
亚 看 主题 < 效果 查看 主题 (效果 下 看 主题 < 效果 
坦 看 主题 d 效 果 坦 看 主题 4 效果 坦 看 主题 d 效 果 
查看 主题 效果 查看 主题 效果 坦 看 主题 6 效果 

| 
图 17-3 


虽然 jQuery Mobile 中 提供 了 系统 自 带 的 主题 , 但 大 部 分 开发 人 员 还 是 希望 可 以 根据 应 用 的 需求 ， 
修改 相应 的 主题 结构 和 色调 。 实 现 的 方法 也 很 简单 ， 只 要 打开 定义 主题 的 CSS 样式 表 文 件 ， 找 到 需 
要 修改 的 元 素 ， 调 整 对 应 的 属性 值 ， 然 后 保存 文件 即 可 。 

需要 注意 的 是 ， 在 前 面 讲解 jQuery Mobile 的 过 程 中 ， 我 们 都 是 使 用 链接 URL 地 址 的 jQuery 
Mobile 函数 库 文件 的 方法 来 制作 jQuery Mobile 页 面 的 ， 代 码 如 下 。 


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery. 
mobile-1.4.5.min.css" /> 

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. 


3s"></acript> 
这 种 方式 所 使 用 的 jQuery Mobile 函数 库 文件 放置 在 远程 服务 器 中 ， 而 并 非 本 地 计算 机 中 ， 所 以 


只 能 查看 而 不 能 修改 。 如 果 需 要 修改 jQuery Mobile 系统 主题 样式 ， 则 需要 将 jQuery Mobile 函数 
库 文件 下 载 到 本 地 计算 机 中 ， 链 接 本 地 jQuery Mobile 函数 库 文件 才 可 以 修改 。 
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修改 默认 头 部 栏 和 尾部 栏 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 17 章 \17-2-2.html 。 视频 : 光盘 \ 视 频 \ 第 17 章 \17-2-2.mp4 


[GE 新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 17 章 \17-2-2.html”。 在 <head> 与 
</head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 1.4.5 函数 库 代码 。 


<head> 

<meta charset="utf-8"> 

<title> 修改 默认 头 部 栏 和 尾部 栏 效 果 </title> 

<meta name="viewport" content="width=device-width,initial-scale=1"> 

<link href="17-2-2/jquery.mobile -1.4.5.css" rel="stylesheet" type="text/css"> 
<script src="17-2-2/jquery-1.11.1.min.js"></script> 


<script src="17-2-2/jquery.mobile-1.4.5.min.js"></script> 


</head> 
注意 ， 此 处 链接 的 jQuery Mobile 函数 库 文件 是 本 地 计算 机 中 的 文件 ， 并 非 
URL 服务 器 上 的 文件 。 可 以 从 jQuery 官方 网 站 中 下 载 到 相应 的 函数 库 文件 。 


葬 到 在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1l> 头 部 标题 </h1></div> 
<div data-role="content"> 
<p> 正文 内 容 </p> 
<a href="#" data-role="button"> 按 钮 </a> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


国 畏 | 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 默认 的 外 观 效果 ， 如 图 17-4 
所 示 。 转 换 到 jQuery Mobile 默认 的 CSS 样式 表 文 件 jquery.mobile-1.4.5.css 中 ， 找 到 名 为 .ui- 
bar-a 的 类 CSS 样式 设置 代码 ， 如 图 17-5 所 示 。 





头 部 标题 UT-bar-a, 

.ui-page-theme-a .ui-bar-inherit, 

html -ui-bar-a .ui-bar-inherit, 

正文 内 容 html .ui-body-a .ui-bar-inherit, 

html body .ui-group-theme-a .ui-bar-inherit EA 
background-color: #e9ege9 /* $ 











按钮 border-color: #ddd /*{a-bar-border}*/; 
color: #333 a- */3 
text-shadow: © lpx © #eee; 
页 肢 font-weight: bold; 
} 
图 17-4 图 17-5 


407 加 


[本 一 对 相应 的 CSS 样式 设置 代码 进行 修改 , 例如 这 里 修改 背景 颜色 和 文字 颜色 , 如 图 17-6 所 示 。 
保存 jquery.mobile-1.4.5.css 样式 表 文 件 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 修改 
后 的 头 部 栏 和 尾部 栏 效果 ， 如 图 17-7 所 示 。 


-ui-bar-ay 
.ui-page-theme-a .ui-bar-inherit, 


html .ui-bar-a .ui-bar-inherit, 
html .ui-body-a .ui-bar-inherit, 








html body .ui-group-theme-a .ui-bar-inherit £ 正文 内 容 
background-color: #9C3 /*{3 g */3 
border-color: #ddd /*{a-bar-border}*/; 按钮 
color: #FFF /*{[a-b */3 
text-shadow: 6 lpx @ #eee; 
font-weight: bold; 
} 
图 17-6 图 17-7 


在 本 实例 中 ， 被 修改 的 系统 主题 类 CSS 样式 .ui-bar-a 有 着 特定 的 结构 ， 其 中 ， 字 符 “-bar” 
表示 该 类 别 是 用 于 控制 header 和 footer 容器 显示 的 ; 字符 “-a” 表 示 该 类 别 属 于 系统 主题 a 级 别 。 


前 面 介绍 了 如 何 修改 系统 自 带 的 主题 ， 实 现 的 方法 十 分 简单 。 但 由 于 是 对 源 CSS 样式 文件 进行 
的 修改 ， 每 次 当 版 本 更 新 后 ， 都 需要 对 新 版 本 的 文件 重新 覆盖 修改 后 的 代码 ， 操 作 不 是 很 方便 。 为 此 ， 
可 以 重新 编写 一 个 单独 的 CSS 文件 ， 专 门 用 于 定义 页 面 与 组 件 的 主题 样式 。 该 文件 与 系统 文件 同时 
并 存 ， 实 现 用 户 自 定义 主题 的 功能 。 

jQuery Mobile 中 可 以 自 定义 主题 类 ， 可 以 定义 到 字母 z， 如 表 17-1 所 示 ， 列 出 了 jQuery 
Mobile 页 面 中 可 以 用 的 主题 类 ， 字 母 (a-z ) 表示 CSS 样式 可 以 指定 a 到 z。 例 如 ui-bar-a 或 
Ui-bar-b 等 。 


表 17-1 jQuery Mobile 中 的 主题 类 
| 说 “了 明 
age theme“(a“z) | 用 于 设置 页 面 整体 

【UUSEE LU 用 于 设置 页 面 头 部 栏 、 尾 部 栏 以 及 其 他 栏目 


用 于 设置 页 面 内 容 块 ， 包 括 列表 视图 、 弹 窗 、 侧 栏 、 面 板 、 加 载 、 折 茎 。 在 
jQuery Mobile 1.4.0 以 上 版 本 中 已 经 废弃 


于 5 本 四 用 于 设置 按 包 
硬 机 是-TT( 忆 | 用 于 设置 控制 组 的 演示 listviews 和 collapsible 集合 
[OHSYSGE UL 用 于 设置 页 面 背 景 颜色 ， 包 括 对 话 框 、 弹 出 窗口 和 其 他 出 现在 最 顶层 的 页 面容 器 











页 面 主题 由 包含 了 整个 页 面 的 样式 化 了 的 HTML 元 素 构成 。jQuery Mobile 推荐 的 页 面 结构 由 
一 个 <div> 组 成 ， 该 元 素 包含 了 一 个 值 为 page 的 data-role 属性 。 如 果 要 样式 化 这 一 元 素 ， 在 其 之 
上 应 用 一 个 data-theme 属性 ， 并 为 其 指定 一 个 唯一 的 且 是 未 用 过 的 主题 值 ， 这 样 就 可 以 为 该 页 面 
写 一 个 自 定义 的 CSS 。 
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自 定义 页 面 主题 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 17 章 \17-3-1.html ”视频 : 光盘 \ 视 频 \ 第 17 章 \17-3-1.mp4 


[GE 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 17 章 \17-3-1.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 的 
案例 相同 。 


<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<meta name="viewport" content="width=device-width,initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mo-— 
bile-1.4.5.min.css" /> 

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 


<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. 
js"></script> 


</head> 


葬 博 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header" data-theme="a"><h1> 头 部 标题 </h1></div> 
<div data-role="content"> 
<div id="main"> 
<img src="images/173101.png"> 
</div> 
</div> 
<div data-role="footer" data-theme="a"><h4> 页 脚 </h4></div> 
</div> 


辐 思 新建 外 部 CSS 样式 表 文 件 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 17 章 \style\17-3-1.css”。 
在 <head> 与 </head> 标签 之 间 添 加 <link> 标签 链接 刚 创建 的 外 部 CSS 样式 表 文 件 。 


<link href="style/17-3-1.css" rel="stylesheet" type="text/css"> 


IE 在 外 部 CSS 样式 表 文 件 中 创建 相应 的 CSS 样式 ， 对 jQuery Mobile 页 面 中 内 容 区 域 的 元 
素 进行 控制 ， 如 图 17-8 所 示 。 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 
效果 ， 如 图 17-9 所 示 。 在 外 部 CSS 样式 表 文件 中 创建 名 为 .ui-page-theme-f 的 CSS 样式， 如 
17-10 所 示 。 
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国道 头 部 标题 
margin: Opx; 
padding: Opx; 





站 
body,html { 
height: 166%; 
} 
smain { 
width: 100%; 
height: 166%; 
text-align: center; 
} 
#main img { “* -Ui-page-theme-f { 
Iden Hs . background-color: #CFEAF3; 
height: auto; 
} mm } 


























图 17-8 图 17-9 图 17-10 


[ 驮 返回 jQuery Mobile 页 面 中 ， 在 page 容器 标签 中 添加 data-theme 属性 设置 ， 引 用 刚 创建 
的 主题 f， 如 图 17-11 所 示 。 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 效 
果 ， 如 图 17-12 所 示 。 


头 部 标题 





<body> 
<div jid="pagel" data-role="page" data-theme="f"> 
<div data-role="header" data-theme="a"><h1> 尖 BP 标题 </hl></div> 
<div data-role="content"> 
<div id="main"> 
<img src="jmages/173161.png"> 
</div> 
</div> 
<div data-role="footer" data-theme="a"><h4> 页 脚 </h4></div> 
</div> 
</body> ED 














图 17-11 图 17-12 


在 jQuery Mobile 中 ， 工 具 栏 所 包含 的 头 部 栏 与 尾部 栏 默 认 的 主题 是 a， 也 可 以 直接 在 工具 栏 容 
器 标签 中 添加 data-theme 属性 来 指定 其 所 需要 使 用 的 主题 。 

如 果 需 要 自 定 义工 具 栏 主 题 样式 ， 则 可 以 创建 .ui-bar-(a-z) 类 CSS 样式 ， 再 通过 data- 
theme 属性 来 调整 所 定义 的 主题 样式 即 可 。 


最 终 文件 : 光盘 \ 最 终 文件 \ 第 17 章 \17-3-2.html 。 视频 : 光盘 \ 视 频 \ 第 17 章 \17-3-2.mp4 


[GE 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 17 章 \17-3-2.html”。 根 据 17.3.1 
小 节 中 案例 的 制作 方法 ， 制 作 该 页 面 ， 页 面 的 HTML 代码 如 下 。 
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<div id="pagel" data-role="page" data-theme="f"> 
<div data-role="header" data-theme="a"><h1> 魔力 学 堂 </h1></div> 
<div data-role="content"> 
<div id="main"> 
<img src="images/173101 .png"> 
</div> 
</div> 
<div data-role="footer" data-theme="a"><h4>CopyRight &copy; 2015 金 景 文化 </h4> 
</div> 
</div> 


</body> 


四 自 定义 的 CSS 样式 表 如 图 17-13 所 示 。 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 
页 面 中 头 部 栏 和 尾部 栏 的 效果 ， 如 图 17-14 所 示 。 


下 二 部 标 是 
margin: Opx; 
padding: epx; 





} 
body,html { 
height: 100%; 
} 
matn { 
width: 100%; 
height: 1665; 
text-align: center; 


} 
smain img { 
width: 100%; 





height: auto; 

} - 

ui-page-theme-f { . 
background-color: #CFEAF3; 











图 17-13 图 17-14 


葬 畏 在 外 部 CSS 样式 表 文 件 中 创建 名 为 .ui-bar-f 的 CSS 样式 ， 如 图 17-15 所 示 。 返 回 
jQuery Mobile 页 面 中 ， 在 头 部 栏 和 尾部 栏 的 <div> 标签 中 修改 data-theme 属性 的 值 为 f， 应 用 刚 
定义 的 f 主题 ， 如 图 17-16 所 示 。 





<div id="pagel" data-role="page" data-theme="f"> 
<div data-role="header" data-theme="f"> 
<h1> 腐 力学 堂 -/hl> 
</div> 
<div data-role="content"> 
<div id="main"> 

















.Ui-bar-f { <img src="images/173191.png"> 
background-color: #5B97E9; </div> 
border-bottom: solid lpx #06066699; </div> 
color: #FFF; <div data-role="footer" data-theme="f"> 
font-family: 微软 雅 黑 ; <h4>CopyRight &copyj 2615 到 景 双 亿 </h4> 
font-size: 20px; </div> 

} </div> 





图 17-15 图 17-16 


”保存 外 部 CSS 样式 表 文件 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 中 自 定 
义 的 头 部 栏 和 尾部 栏 的 效果 ， 如 图 17-17 所 示 。 如 果 希 望 头 部 栏 和 尾部 栏 的 效果 不 同 ， 可 以 再 创建 
一 个 工具 栏 样式 。 在 外 部 CSS 样式 表 文件 中 创建 名 为 .ui-bar-g 的 CSS 样式 ， 如 图 17-18 所 示 。 
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-Ui-bar-g { 

background-color: #B1B1B1; 
border: Qpx; 

border-top: solid lpx #FFF; 
font-size: 14px; 

color: #FFF; 

font-weight: 200; 











CopyRlght 2015 爹 本 文化 了 


图 17-17 图 17-18 


国 畏 ”返回 jQuery Mobile 页 面 中 ， 在 尾部 栏 的 <div> 标签 中 修改 data-theme 属性 的 值 为 g， 
应 用 刚 定义 的 g 主题 ， 如 图 17-19 所 示 。 保 存 外 部 CSS 样式 表 文 件 ， 在 Opera Mobile 模拟 器 中 
预览 该 页 面 ， 可 以 看 到 页 面 中 自 定义 的 头 部 栏 和 尾部 栏 的 效果 ， 如 图 17-20 所 示 。 


大 力学 党 








<div id="pagel" data-role="page" data-theme="f"> 
<div data-role="header" data-theme="f"> 
<h1> 麻 力学 堂 </hl1> 
</div> 
<div data-role="content"> 
<div id="main"> 
<img src="images/173101.png"> 








</div> 
</div> 
<div data-role="footer" data-theme="g"> 
<h4>CopyRight g&copy; 2615 至 景 支 全 </h4> 
</div> 
</div> 








图 17-19 


与 页 面 主题 相 比 而 言 ， 内 容 主 题 所 影响 的 范围 小 一 些 。 内 容 主题 所 针对 的 范围 仅 局 限于 页 面 的 
content 容器 中 ， 该 容器 之 外 的 元 素 不 受 影响 。 

此 外 ， 在 内 容 区 域 content 容器 中 ， 还 可 以 通过 data-content-theme 属性 设置 可 折 芭 区 块 中 
显示 区 域 的 主题 ， 而 这 一 主题 是 独立 的 、 自 定义 的 ， 不 受 限 于 内 容 区 域 content 容器 的 主题 。 


自 定义 可 折叠 区 块 主题 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 17 章 \17-3-3.html 。 视频 : 光盘 \ 视 频 \ 第 17 章 \17-3-3.mp4 


[ES 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 17 章 \17-3-3.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代码 , 与 前 面 的 案例 相同 。 
[王国 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 
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<div id="pagel" data-role="page"> 
<div data-role="header" data-theme="b"><h1> 头 部 标题 </h1></div> 
<div data-role="content"> 
<div data-role="collapsible" data-theme="b" data-content-theme="a"> 
<h3 data-role="none"> 今日 天 气 </h3> 
<p> 晴 ， 气温: <code>18~4</code> 度 ， 西 风 <em>3-4</em> 级 </p> 
</div> 
<div data-role="collapsible" data-theme="a" data-content-theme="b"> 
<h3> 明日 天 气 </h3> 
<p> 上 晴 ， 气 温 : <code>19~4</code> 度 ， 东风 <em>1-2</em> 级 </p> 
</div> 
</div> 
<div data-role="footer" data-theme="b"><h4> 页 脚 </h4></div> 
</div> 


[一 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 中 可 折 芭 区 块 的 效果 ， 如 
图 17-21 所 示 。 将 可 折 芭 区 块 展示 ， 可 以 看 到 为 可 折 才 区 块 应 用 的 主题 效果 ， 如 图 17-22 所 示 。 


头 部 标题 


头 部 标题 晴 , 气温 : 18~4 度 ， 西风 3-4 级 


十 今日 天 气 明日 天 气 


明日 天 气 











图 17-21 图 17-22 


在 collapsible 可 折 堆 区 块 容 器 中 ， 设 置 data-theme 和 data-content- 
提示 theme 属性 的 值 , 可 以 修改 可 折 芭 区 块 的 主题 。 前 者 针对 的 是 可 折 芭 区 块 的 标题 部 分 ， 
后 者 针对 的 是 可 折 芭 区 块 的 内 容 显 示 区 域 部 分 。 如 果 两 个 属性 都 不 设置 ， 将 自动 继 

承 content 内 容 容 器 所 使 用 或 默认 的 主题 。 





17.4 


ThemeRoller 是 jQuery Mobile 提供 的 一 款 非常 实用 的 主题 创建 工具 。 访 问 ThemeRoller 官 
方 网 站 http://themeroller.jquerymobile.com/， 页 面 如 图 17-23 所 示 。 
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图 17-23 


进入 ThemeRoller 官方 网 站 页 面 可 以 看 到 ThemeRoller 编辑 器 ， 默 认 有 3 个 空白 的 主题 面 
板 ， 分 别 为 A、B 和 C， 而 在 页 面 下 方 ， 还 可 以 通过 单 击 Add swath 区 域 来 添加 空白 的 主题 面板 ， 
如 图 17-24 所 示 。 在 页 面 左 侧 的 功能 区 的 标签 对 应 相应 的 主题 ， 其 中 Global 标签 用 于 设置 jQuery 
Mobile 主题 的 全 局 属性 ， 如 图 17-25 所 示 。 








图 17-24 图 17-25 


在 Global 选项 卡 中 展开 各 选项 ， 可 以 看 到 可 以 设置 的 全 局 属性 ， 如 图 17-26 所 示 。 














页 面 默 认 字体 











组 圆 角 值 





按钮 圆 角 值 





图 标 表示 方式 
图 标 不 透明 度 





图 标 颜色 





元 素 阴影 颜色 
元 素 阴影 大 小 














元 素 阴 影 不 透明 度 
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单 击 A 标 签 , 可 以 切换 到 人 主题 的 相关 属性 设置 中 , 可 以 对 相关 属性 进行 设置 , 如 图 17-27 所 示 。 





Delete Duplicate 








页 面 整 体 属性 设置 区 

工具 栏 属性 设置 区 
内 容 区 域 属性 设置 区 

默认 超 链接 属性 设置 区 
按钮 正常 状态 设置 区 

按钮 经 过 状态 设置 区 
按钮 按 下 状态 设置 区 

元 素 激活 状态 设置 区 





图 17-27 


例如 ， 在 A 选项 卡 中 对 相应 的 属性 进行 设置 ， 在 页 面 右 侧 的 A 主题 上 马上 就 能 够 看 到 相应 的 主 


题 效果 ， 如 图 17-28 所 示 。 














切换 到 人 A 标签 ， 
可 能 对 A 主题 样 
式 进行 设置 
i 
单 击 颜色 设置 框 ， Sarmple lext ond links 
可 以 弹出 色 块 窗口 ， ER 
选择 需要 的 颜色 。 | Em Read-only Ist tem 
也 可 以 直接 输入 Linked list item Linked list item 
十 六 进 制 颜色 值 Er © pad 
Checkbox 
~ 


图 17-28 






在 页 面 左 侧 所 设置 
的 效果 ， 会 直接 体 
现在 相应 的 主题 面 
板 上 


如 果 不 知道 标签 的 选项 对 应 的 是 什么 组 件 ， 可 以 利用 页 面 中 提供 的 inspector 工具 来 查看 。 单 击 
页 面 中 的 inspector 工具 ， 在 A 主题 面板 中 单 击 相应 的 元 素 ， 页 面 左 侧 功能 区 自动 切换 到 该 元 素 属性 


的 设置 选项 中 ， 如 图 17-29 所 示 。 


在 该 页 面 中 创建 好 需要 的 主题 之 后 ， 单 击 页 面 上 方 的 Download 按钮 ， 如 图 17-30 所 示 。 弹 出 


主题 文件 下 载 窗口 ， 如 图 17-31 所 示 。 


在 Theme Name 文本 框 中 输入 自 定义 文件 名 称 ， 单 击 右 下 角 Download Zip 按钮 ， 即 可 下 载 生 


成 的 jQuery Mobile 主题 样式 文件 ， 如 图 17-32 所 示 。 
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图 17-30 
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下 载 文件 





图 17-32 


下 载 的 文件 为 zip 压缩 包 文件 ,解压 缩 文件 之 后 ,会 有 一 个 index.html 文 件 和 一 个 themes 文 件 夹 。 
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打开 index.html 文件 之 后 ， 会 告诉 用 户 如 何 引用 文件 ， 只 要 用 几 行 代码 取代 网 页 中 原来 的 引用 代码 
即 可 ， 如 图 17-33 所 示 。 
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图 17-33 


需要 注意 的 是 ， 一 定 要 将 解压 得 到 的 themes 文件 夹 放置 在 与 jQuery Mobile 
页 面 所 在 的 文件 夹 中 ， 这 样 通过 复制 的 代码 才能 够 正确 引用 相应 的 文件 。 


在 themes 文件 夹 中 包含 了 要 引用 的 mytheme.min.css 文件 ， 以 及 未 压缩 的 mytheme.css 文件 。 
如 果 以 后 想 要 再 次 修改 这 个 CSS 样式 时 ， 只 需要 在 ThemeRoller 网 站 中 单 击 页 面 头 部 的 import 按钮 ， 
如 图 17-34 所 示 。 在 弹出 的 窗口 中 粘贴 myTheme.css 文件 中 的 内 容 就 可 以 了 ， 如 图 17-35 所 示 。 


Inpon Detau Theme 

















图 17-35 


使 用 ThemeRoller 创建 好 的 主题 样式 ， 只 需要 在 jQuery Mobile 页 面 中 为 相应 的 元 素 通过 
data-theme 属性 指定 相应 的 主题 就 可 以 应 用 了 。 


应 用 ThemeRoller 生成 的 主题 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 17 章 \17-4.html ”视频 : 光盘 \ 视 频 \ 第 17 章 \17-4.mp4 


[GE 打开 页 面 “ 光 盘 \ 源 文件 \ 第 17 章 \17-4.html”， 该 页 面 的 HTML 代码 如 下 。 
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[到 红 ”在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 应 用 默认 的 主题 效果 ， 如 图 17-36 
所 示 。 返 回 jQuery Mobile 页 面 中 , 在 页 面 头 部 的 <head> 与 </head> 标签 之 间 蔡 换 相 应 的 引用 代码 ， 
如 图 17-37 所 示 。 








<head> 
<meta charset=" 
<tittey| 








图 17-36 17-37 
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[于 在 页 面 中 page 容器 的 <div> 标签 中 设置 data-theme 属性 为 a， 应 用 自 定义 的 a 主题 ， 如 
到 17-38 所 示 。 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 应 用 自 定义 的 a 
主题 的 效果 ， 如 图 17-39 所 示 。 
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<div id="pagel" data-role="page" data-theme="a"> | ee 2 
<div data- role="header"><h1> 摄 肿 7 FE 要 </hi></div> 


<div data-role="content"> 











<ul data-role="\listview"> Sra en 
<li data-role="list-divider"> 了 3 
2615 年 摄影 作品 . aaa 
<span class="ui-li-count">2</span> EO pe 
</1i> 
图 17-38 图 17-39 








区 ”在 页 面 的 page 容器 中 修改 data-theme 属性 为 b， 应 用 自 定 义 的 b 主题 ， 如 图 17-40 所 
示 。 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 应 用 自 定 义 的 b 主题 的 效果 ， 如 
图 17-41 所 示 。 























<body> 
<div id="pagel" data-role="page" data-theme="b"> 
<div data-role="header"><h1>: ax</hl></div> 


<div data-role="content"> 
<ul data-role="listview"> 
<1i data-role="list-divider"> 
261 作品 
<span class="ui-li-count">2</span> 
</Li> 
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图 17-40 图 17-41 


当 修改 了 页 面 头 部 <head> 与 </head> 标签 之 间 的 相关 引用 文件 后 ， 将 会 使 用 

提示 ThemeRoller 自 定义 的 主题 覆盖 默认 的 主题 效果 。 当 然 用 户 也 可 以 在 ThemeRoller 

网 站 中 创建 多 个 自 定义 主题 ， 这 样 就 能 够 使 jQuery Mobile 页 面 的 主题 效果 更 加 丰 
富 和 多 样 。 


本 章 主要 介绍 了 jQuery Mobile 主题 的 相关 内 容 ， 包 括 jQuery Mobile 的 默认 主题 ， 以 及 对 默 
认 主 题 进行 修改 和 自 定义 的 方法 ， 还 介绍 了 使 用 jQuery Mobile 的 主题 创建 工具 ThemeRoller 的 使 
用 方法 和 技巧 ， 以 及 应 用 ThemeRoller 创建 主题 的 方法 。 完 成 本 章 内 容 的 学 习 ， 读 者 需要 对 jQuery 
Mobile 主题 有 一 定 的 了 解 ， 并 能 够 创建 出 更 多 更 好 的 jQuery Mobile 主题 。 
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pp ~ 
本 章 知识 点 
第 18 章 使 用 jQuery v 了 MQuey Monio A 
Mobile 事件 v ee Mobile 页 面 事件 


的 使 用 方法 
jQuery Mobile 完全 使 用 HTML 5 和 CSS 3 特征 开发 
学 反 jQuery Mobile 触 措 事 件 
API 接 口 。 借 助 jQuery Mobile API 拓 展 事件 , 可 以 在 页 面 触摸 、 的 使 用 方法 
滚动 、 加 载 、 显 示 与 隐藏 的 事件 中 ， 编 写 特定 的 代码 ， 实 现 事 Y 掌握 jQuery Mobile 屏幕 滚动 
件 触发 时 需要 完成 的 功能 。 本 章 将 向 读者 介绍 jQuery Mobile 事件 的 使 用 方法 
常用 事件 的 使 用 方法 和 技巧 。 w 掌握 jQuery Mobile 屏幕 翻转 事 
件 的 使 用 方法 
理解 并 掌握 jQuery Mobile 的 














在 jQuery Mobile 中 , 框架 的 基本 配置 项 是 可 以 被 修改 的 。 由 于 配置 项 针对 的 是 全 局 功能 的 使 
jQuery Mobile 在 页 面 加 载 到 增强 特征 时 就 需要 使 用 这 些 配置 项 ， 而 这 个 加 载 过 程 早 于 documen 
ready 事件 的 触发 ， 因 此 在 该 事件 中 进行 修改 是 无 效 的 ， 而 要 选择 更 早 的 mobileinit 事件 ， 在 该 事 人 
中 ， 可 以 编写 新 的 配置 项 来 覆盖 原 有 的 基本 配置 项 设置 。 

在 document.mobileinit 事件 中 自 定 义 jQuery Mobile 基本 配置 项 ， 可 以 使 用 jQuery 中 的 
$.extend 方法 扩展 ， 也 可 以 借助 $.mobile 对 象 进行 设置 。 

以 下 是 可 配置 的 $.mobile 选项 ， 用 户 可 以 在 自己 自 定 义 的 JavaScript 中 对 其 进行 覆盖 。 

e activeBtnClass(string,default:"ui-btnactive ") 
来 识别 和 样式 化 “活动 ”按钮 的 CSS 类。 这 个 CSS 属性 通常 用 来 样式 化 和 识别 标签 栏 中 的 
活动 按钮 。 

e activePageClass(string,default:"ui-page-active ") 

这 个 CSS 类 分 配给 当前 可 见 和 活动 的 页 面 或 对 话 框 。 例 如 ， 当 多 个 页 面 载 入 到 DOM 中 时 ， 活 
动 的 页 面 会 应 用 这 个 CSS 属性 。 

e ajaxEnabled (boolean,default:true ) 
在 可 能 的 情况 下 ， 通 过 Ajax 动态 载 入 页 面 。 默 认 情 况 下 ， 所 有 页 面 的 Ajax 载 入 都 是 打开 的 ， 
但 是 外 部 URL、 使 用 rel="external" 或 target="_blank" 属性 标记 的 链接 除外 。 如 果 禁 用 Ajax， 页 
而 链接 会 使 用 普通 的 HTTP 请 求 载 入 ， 而 且 不 会 用 到 CSS 转换 。 

e allowCrossDomainPages(Boolean,default:false) 

在 使 用 PhoneGap 进行 开发 时 ， 建 议 将 该 配置 选项 设置 为 rue。 这 会 允许 jQuery Mobile 管理 












































在 二 



































































































































































































































PhoneGap 中 跨 域 ( cross-domain ) 请 求 的 页 面 载 入 逻辑 。 

e autolnitializePage(Boolean,default:true) 

对 于 想 要 完全 控制 页 面 初始 化 顺序 的 高 级 开发 人 员 来 说 ， 可 以 将 该 配置 选项 设置 为 false， 这 样 
会 禁用 所 有 页 面 组 件 的 自动 初始 化 。 这 使 得 开发 人 员 能 够 根据 需要 手动 增强 每 一 个 组 件 。 

e defaultDialogTransition(string,default:"pop") 

在 转换 到 一 个 对 话 框 时 ， 使 用 默认 的 转换 动画 效果 。 如 果 不 需要 转换 动画 效果 ， 可 以 将 该 转换 设 
置 为 none。 

e defaultPageTransition(string,default:"slide") 

在 转换 到 一 个 页 面 时 ， 使 用 默认 的 转换 动画 效果 。 如 果 不 需要 转换 动画 效果 ， 可 以 将 该 转换 设置 
为 none。 

e gradeA 

返回 一 个 布尔 值 的 函数 ，default: 浏览 器 必须 支持 媒体 查询 或 者 支持 IE 7 以 及 更 高 版 本 。 
jQuery Mobile 会 调用 该 方法 来 确定 框架 是 否 应 用 了 动态 的 CSS 页 面 增强 。 默 认 情 况 下 ， 该 方法 会 
为 支持 媒体 查询 的 所 有 浏览 器 应 用 增强 。 但 是 ，jQuery Mobile 只 会 增强 A 级 浏览 器 的 页 面 。IE 7 
以 及 更 高 版 本 属于 A 级 浏览 器 ， 因 此 它们 的 显示 也 会 被 增强 。 

e hashlisteningEnabled(boolean,default:true) 

基于 location.hash 自动 载 入 和 显示 页 面 。jQuery Mobile 监听 location.hash 的 改变 ， 以 载 入 
DOM 内 的 内 部 页 面 。 用 户 可 以 禁用 该 选项 ， 通 过 手动 方式 来 处 理 hash 的 改变 。 

e loadingMessage(string,default:"loading") 

设置 载 入 消息 ， 使 其 在 基于 Ajax 的 请 求 其 间 出 现 。 此 外 ， 可 以 指派 一 个 false 来 禁用 该 消息 。 
如 果 用 户 想 在 运行 时 基于 每 个 页 面 来 更 新 载 入 消息 ， 则 可 以 在 页 面 内 对 其 进行 更 新 。 

e minScrollBack(string,default:250) 

设置 最 小 的 滚动 距离 ， 并 且 在 返回 页 面 时 ， 该 值 也 能 被 记 住 。 在 返回 一 个 页 面 时 ， 如 果 链 接 的 滚 
动 位 置 超出 了 minScrollBack 的 设置 ， 则 框架 会 自动 滚动 到 启动 转换 的 位 置 或 链接 。 默 认 情 况 下 ， 
滚动 阔 值 是 250 像素 ， 如 果 你 希望 删除 这 个 最 小 的 设置 ， 以 便 框 架 在 滚动 时 能 够 无 视 滚动 的 位 置 ， 
则 可 以 将 该 值 设 置 为 0。 如果 希望 禁用 该 属性 ， 则 将 其 值 设置 为 infinity 。 

e nonHistorySelectors(string,default:"dialog") 

可 以 指定 将 哪个 页 面 组 件 排除 在 浏览 器 的 历史 记录 栈 之 外 。 默 认 情 况 下 ， 设 置 了 data- 
rel="dialog" 属性 的 任何 链接 ， 或 者 是 设置 了 data-rel="dialog" 属性 的 任何 页 面 都 不 会 出 现在 历史 
记录 中 。 此 外 ， 在 导航 到 相应 的 页 面 时 ， 这 些 非 历史 的 选择 器 组 件 也 不 会 更 新 它们 的 URL， 这 样 做 
的 结果 是 无 法 为 这 些 页 面 添加 书签 。 

e ns(string,default: "") 

用 于 jQuery Mobile 内 自 定义 data-* 属性 的 名 称 空间 。 在 HTML 5 中 ， 数 据 属性 属于 新 特性 。 
例如 ，data-role 是 role 属性 的 默认 名 称 空间 。 如 果 想 要 以 全 局 方式 覆盖 默认 的 名 称 空 间 ， 则 需要 覆 
盖 $.mobile.ns 选项 。 

e page.prototype.options.addBackBtn(Boolean,default:false) 

如 果 希 望 某 个 应 用 程序 上 显示 回 退 按钮 ， 则 将 该 选项 设置 为 rue。jQuery Mobile 内 的 回 退 按钮 
是 一 个 智能 的 组 件 ， 只 有 当 要 回 退 的 页 面 处 于 历史 记录 栈 中 时 ， 回 退 按钮 才 会 显示 。 

e pageLoadErrorMessage(string,default:"Error Loading Page") 

当 一 个 Ajax 页 面 请 求 载 入 失败 时 ， 会 出 现 该 错误 响应 消息 。 


在 移动 终端 设备 中 ， 有 一 类 事件 无 法 触发 ( 如 鼠标 事件 或 窗口 事件 ) ， 但 它们 又 客观 存在 。 因 此 ， 
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在 jQuery Mobile 中 , 借助 框架 的 API 将 这 类 型 的 时 间 扩展 为 专门 用 于 移动 终端 设备 的 事件 , 如 触摸 、 
设备 翻转 、 页 面 切换 等 ， 开 发 人 员 可 以 使 用 live() 或 bind() 进行 绑 定 。 


》1. 页 面 显 示 或 隐藏 

在 jQuery Mobile 中 ， 当 不 同 页 面 间或 同一 个 页 面 不 同 容器 间 相 互 切换 时 ， 将 触发 页 面 中 的 显示 
或 隐藏 事件 。 具 体 的 事件 类 型 有 4 个 ， 分 别 介绍 如 下 。 

e pagebeforeshow ( 页 面 显 示 前 事件 ) 

当 页 面 在 显示 之 前 ， 实 际 切换 正在 进行 时 触发 ， 此 事件 回调 函数 传 回 的 数据 对 象 中 有 一 个 
prevPage 属性 , 该 属性 是 一 个 jQuery 集合 对 象 , 它 可 以 获取 正在 切换 远离 页 面 的 全 部 DOM 元 素 。 

e pagebeforehide ( 页 面 隐藏 前 事件 ) 

当 页 面 在 隐藏 之 前 ， 实 际 切换 正在 进行 时 触发 ， 此 事件 回调 函数 传 回 的 数据 对 象 中 有 一 个 
nextPage 属性 , 该 属性 是 一 个 jQuery 集合 对 象 ， 它 可 以 获取 正在 切换 目标 页 面 的 全 部 DOM 元 素 。 

e pageshow ( 页 面 显 示 完 成 事件 ) 

当 页 面 切换 完成 时 触发 ， 该 事件 回调 函数 传 回 的 数据 对 象 中 有 一 个 prevPage 属性 ， 该 属性 是 一 
个 jQuery 集合 对 象 ， 它 可 以 获取 正在 切换 之 前 上 一 页 面 的 全 部 DOM 元 素 。 

e pagehide ( 页 面 隐藏 完成 事件 ) 

当 页 面 隐藏 完成 时 触发 ， 该 事件 回调 函数 传 回 的 数据 对 象 中 有 一 个 nextPage 属性 ， 该 属性 是 一 
个 jQuery 集合 对 象 ， 它 可 以 获取 切换 之 后 当前 页 面 的 全 部 DOM 元 素 。 
》 2.， 加 载 外 部 页 面 

外 部 页 面 加 载 时 会 触发 两 个 事件 ， 一 个 是 pagebeforeload， 另 一 个 是 当 页 面 载 入 成 功 时 会 触发 
pageload 事件 ， 载 入 失败 时 会 触发 pageloadfailed 事件 。 

e pageload 事件 

pageload 事件 的 使 用 方法 如 下 。 


$ (document) .on ("pageload", function (event,data){ 
alert ("URL: "+data.url); 
1) 


pageload 事件 的 处 理 函 数 包括 event 和 data， 说 明 如 表 18-1 所 示 。 
表 18-1 pageload 事件 的 处 理 函数 


| 说 
[Gan 任何 jQuery 的 事件 属性 ,例如 eventtarget、eventtype、eventpageX 等 
包含 以 下 属性 。 

> url: 字符 串 ( string ) 类 型 ， 页 面 的 URL 地 址 。 

> absUrl: 字符 串 ( string ) 类 型 ， 绝 对 路 径 。 

> dataUrl: 字符 串 ( string ) 类 型 ， 地 址 栏 的 URL 。 

> options(object): 对 象 (object ) 类 型 ，$.mobile.loadpage() 指定 的 选项 。 
> 

> 






xhr: 对 象 (object ) 类 型 ，XMLHttpRequest 对 象 。 
textStatus: 对 象 (object ) 状态 或 空 值 ( null) ， 返 回 状态 
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e pageloadfailed 事件 
如 果 页 面 加载 失 败 ， 就 会 触发 pageloadfailed 事件 ， 默 认 会 出 现 Error Loading Page 字样 ， 
该 事件 的 使 用 方法 如 下 。 


$ (document) .on ("pageloadfailed",function(){ 


alert (" 页 面 加 载 失 败 ! ") ; 
二 


》 3. 页 面 切换 事件 

在 jQuery Mobile 页 面 中 ， 各 页 面 之 间 相互 切换 会 显示 相应 的 动画 过 渡 效 果 ， 这 样 的 页 面 切换 效 
果 使 得 jQuery Mobile 页 面 的 切换 更 加 自然 。 

jQuery Mobile 中 切换 页 面 的 语法 格式 如 下 。 


$(":mobile-pagecontainer") .pagecontainer ("change"vto[,options])7 


to 属性 用 于 设置 想 要 切换 的 目标 页 面 ， 其 值 必须 是 字符 串 或 者 DOM 对 象 ， 内 部 页 面 可 以 直接 指 
定 DOM 对 象 id 名 称 。 例 如 ， 要 切换 到 id 名 称 为 page2 的 页 面 ， 可 以 写 为 加 age2; 要 链接 外 部 页 
面 ， 必 须 以 字符 串 方 式 表 示 ， 例 如 home.html。 
option 属性 可 以 省 略 不 写 ， 其 属性 如 表 18-2 所 示 。 
表 18-2 页 面 切换 事件 的 属性 
> 说 明 
alowSamePageTransition “| 是 否 允许 切换 到 当前 页 面 ， 默 认 值 为 false 


3 是 否 更 新 浏览 记录 。 如 果 将 该 属性 设置 为 false， 则 当前 页 面 浏览 记录 会 被 

清除 ， 用 户 无 法 通过 “上 一 页 ”按钮 返回 。 默 认 值 为 true 

[IEGUNI 更 新 地 址 栏 的 Ur 

| 加 载 画面 延迟 秒 数 ， 单 位 为 ms ( 毫秒 ) ， 默 认 值 为 50， 如 果 页 面 在 此 秒 数 
之 前 加 载 完成 ， 就 不 会 显示 正在 加 载 中 的 信息 画面 

[SEO 当 页 面 已 经 在 DOM 中 ， 是 否 要 将 页 面 重新 加 载 。 默 认 值 为 false 


页 面 切 换 效果 是 否 需要 反 向 , 如 果 设置 为 true， 就 像 模拟 返回 上 一 页 的 效果 。 
默认 值 为 false 


enewLoaaMsg 时 时 是 否 要 显示 加 载 中 的 信息 画面 默认 值 为 true 
[rr re tse sha 


当 to 属性 的 目标 页 面 是 URL 时 ， 指 定 HTTP Method 使 用 get 或 post， 
默认 值 为 get 


其 中 ，transition 属性 用 来 指定 页 面 过 渡 动 画 效果 ， 如 飞 入 、 弹 出 或 淡 入 淡出 效果 等 共 6 种 ， 如 
表 18-3 所 示 。 








表 18-3 transition 属性 的 过 渡 动 画 效果 


[性 值 | 说 明 


[RU 2D 或 3D 旋 转动 画 过 渡 只 有 支持 3D 效 果 的 设备 才能 使 用 
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设置 页 面 切换 过 渡 动 画 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 18 章 \18-2-1.html 视频: 光盘 \ 视 频 \ 第 18 章 \18-2-1.mp4 


[GE 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \18-2-1.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
E 本 ”在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page" data-theme="a" class="demo page"> 
<div data-role="header"> 
<h1l> 第 1 页 标题 </h1> 
</div> 
<div data-role="content"> 
<ul data-role="listview"> 
<li><a href="#page2"” id="goSecond"> 关 于 我 们 </a></1i> 
<1i><a href="#"> 我 们 的 作品 </a></1i> 
<1i><a href="#"> 服务 范围 </a></1i> 
<1i><a href="#"> 联系 我 们 </a></1i> 
</ul> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
<div id="page2" data-role="page" data-theme="b" class="demo page"> 
<div data-role=” header” > 
<a href="#pagel" data-transition="pop"> 返回 </a> 
<a href="#pagel" id"goFirst"> 第 一 页 </a> 
<h1> 关于 我 们 </h1> 
</div> 
<div data-role="content"> 
<p> ”工作 室 成 立 于 2014 年 初 ， 在 互动 设计 和 互动 营销 领域 有 着 独特 理解 。 我 们 一 直 专 注 于 互联 
网 整合 营销 传播 服务 ， 以 客户 品牌 形象 为 重 ， 提 供 精 确 的 策划 方案 与 视觉 设计 方案 ， 团 队 整 体 有 着 国际 化 意识 
与 前 瞻 思 想 ; 以 视觉 设计 创意 带动 客户 品牌 提升 ， 洞 察 互联 网 发 展 趋势 。<p> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


[王国 在 页 面 头 部 <head> 与 </head> 标签 之 间 添加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 
$ (document) .one ("pagecreate",".demo page",function(){ 
$("#goSsecond") .on ("click",function(){ 
$(":mobile-pagecontainer") .pagecontainer ("change", "#page2",{ 
transition:"slideup" 


1D); 
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1 
$("#goFirst") .on("click",function(){ 
$(":mobile-pagecontainer") .pagecontainer ("change", "#pagel",{ 
transition:"slidedown" 


D> 


]) 


</script> 


在 该 部 分 JavaScript 代码 中 ， 设 置 单 击 id 名 称 为 goSecond 的 超 链 接 时 ， 页 面 切换 的 动画 过 
渡 效 果 为 slideup; 单 击 id 名 称 为 goFirst 的 超 链 接 时 ， 页 面 切换 的 动画 过 渡 效 果 为 slidedown。 不 
会 对 页 面 中 其 他 的 超 链接 所 产生 的 页 面 切换 动画 过 渡 效 果 产 生 影响 。 
国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 效果 ， 如 图 18-1 所 示 。 
单 击 第 一 个 页 面 中 的 “关于 我 们 ”链接 文字 时 , 会 显示 由 下 往 上 滑 入 切换 过 渡 到 第 二 页 ,如 图 18-2 所 示 。 
单 击 第 二 个 页 面 中 的 “第 一 页 ”按钮 时 ， 会 显示 由 上 往 下 滑 入 切换 过 渡 到 第 一 页 。 





第 1 页 标题 
关于 我 们 
我 们 的 作品 
服务 范围 
联系 我 们 
页 肢 
图 18-1 图 18-2 


E 除了 可 以 使 用 JavaScript 代码 的 方式 来 改变 页 面 切换 的 动画 效果 之 外 ， 还 可 以 
提示 产 ”直接 在 超 链接 标签 <a> 中 添加 data-transition 属性 设置 ， 该 属性 用 于 设置 超 链接 
所 产生 的 页 面 跳 转 动画 过 渡 效 果 。 


在 jQuery Mobile 中 ， 触 摸 事 件 包 括 5 种 类 型 。 
。 tap ( 轻 击 ) 事件 
用 户 完成 一 次 快速 完整 的 轻 击 页 面 屏幕 时 触发 ， 使 用 方法 如 下 。 


$("div") .on("tap", function(){ 
$ (this) .hide(); 
J 


以 上 代码 表示 当 在 屏幕 中 单 击 了 div 对 象 后 ， 就 会 在 页 面 中 隐藏 该 div 对 象 。 
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e taphold ( 轻 击 不 放 ) 事件 
用 户 完 成 一 次 轻 击 页 面 屏幕 且 保 持 不 放 ( 大 约 1 秒 ) 时 触发 ， 使 用 方法 如 下 。 


$ ("div") .on("taphold", function(){ 
$ (this) .hide(); 
1) 


以 上 代码 表示 当 在 屏幕 中 单 击 某 个 div 对 象 不 放 ， 大 约 1 秒 之 后 ， 就 会 在 页 面 中 隐藏 该 div 对 象 。 

e swipe (滑动 ) 事件 

用 户 在 1 秒 内 水 平 拖 多 屏幕 距离 大 于 30px 或 垂直 拖 多 屏幕 距离 小 于 20px 时 触发 。swipe 事件 
的 使 用 方法 如 下 。 


$ ("div") .on("swipe",function(){ 
$ ("span") .text (“正在 滑动 屏幕 ”) ; 
1) 


以 上 代码 表示 当 在 屏幕 中 某 个 div 对 象 中 滑动 屏幕 时 ， 在 页 面 的 <span> 标签 中 显示 相应 的 信息 。 
触发 swipe 事件 时 相关 属性 说 明 如 表 18-4 所 示 。 


表 18-4 触发 swipe 事件 时 相关 属性 说 
[| 说 。 明 
SCIGISUpressionThreshod 该 属性 默认 值 为 10px， 水 平 拖 鬼 大 于 该 信 则 停止 
ourarenTiienaa 该 属性 默认 值 为 1000ms ， 划 动 时 超过 该 值 则 停止 
[EGREOTialDiStanceTreshiod | 该 属性 默认 值 为 30px， 水 平 拖 生 超出 该 值 时 才能 滑动 
[AicalDistanceTcshHod 该 属性 默认 值 为 75px， 委 直 拖 抱 小 于 该 值 时 才能 滑动 


e ”swipeleft ( 向 左 滑动 ) 事件 
用 户 向 左 侧 滑动 屏幕 时 触发 该 事件 ， 其 使 用 方法 如 下 。 






$ ("div") .on("swipeleft",function(){ 
$ ("span") .text (“正在 向 左 滑动 屏幕 ”) ; 
I 


以 上 代码 表示 当 在 屏幕 中 某 个 div 对 象 中 向 左 滑动 屏幕 时 ， 在 页 面 的 <span> 标签 中 显示 相应 的 

言 息 。 
e ”swiperight ( 向 右 划 动 ) 事件 

用 户 向 右 侧 滑动 屏幕 时 触发 该 事件 ， 其 使 用 方法 如 下 。 


亨 


$ ("div") .on("swiperight",function(){ 
$ ("span") .text (“正在 向 右 滑动 屏幕 ”) ; 
}) 


以 上 代码 表示 当 在 屏幕 中 某 个 div 对 象 中 向 右 滑动 屏幕 时 , 在 页 面 的 <span> 标签 中 显示 相应 的 信息 。 


swipeleft 与 swiperight 事件 常用 于 移动 项 目 中 的 页 面 元 素 向 左 或 向 右 的 滑动 查看 ， 如 相册 中 的 
图 片 浏览 。 
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通过 滑动 屏幕 浏览 图 片 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 18 章 \18-2-2.html 。 视频 : 光盘 \ 视 频 \ 第 18 章 \18-2-2.mp4 


OI 新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \18-2-2.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
辐 罗 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page" data-theme="b"> 
<div data-role="header"> 
<hl> 摄影 作品 欣赏 </h1> 
</div> 
<div data-role="content"> 
<div class="ifrswipt"> 
<ul id="ifrswipt"> 


<1i><img src="images/182201.jpg" alt="" class="imgswipt"></1i> 





<1i><img src="images/182202.jpg" alt="" class="imgswipt"></1i> 
<1i><img src="images/182203.jpg" alt="" class="imgswipt"></1i> 
<1i><img src="images/182204.jpg" alt="" class="imgswipt"></1i> 
<1i><img src="images/182205.jpg" alt="" class="imgswipt"></1i> 
<1i><img src="images/182206.jpg" alt="" class="imgswipt"></1i> 
</ul> 
</div> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


辐 5 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 效果 ， 如 图 18-3 所 
示 。 新 建 外 部 CSS 样式 表 文 件 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \style\18-2-2.css”。 在 
<head> 与 </head> 标签 之 间 添 加 <link> 标签 链接 刚 创建 的 外 部 CSS 样式 表 文 件 , 如 图 18-4 所 示 。 


ol ee 


全 作品 隐 左 





<head> 

<meta charset="utf-8"> 

<title> 设 置 页 面 切 换 过 波动 画 效 果 </title> 

iewport" content="width=device-width, initial-scale=1"> 

ylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 





luery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<link rel="stylesheet" href="style/18-2-2.css" /> 
<Jhead> 














图 18-3 图 18-4 


在 外 部 CSS 样式 表 文件 中 创建 相应 的 CSS 样式 ， 对 jQuery Mobile 页 面 中 内 容 区 域 的 元 
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素 进行 控制 ， 如 图 18-5 所 示 。 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 
效果 ， 如 图 18-6 所 示 。 


i 


rm CR 


二 及 作品 多 党 





a 





margin: Opx; 
padding: Opx; 














. 
.ifrswipt { - 二 ~ 
position: relative; “ifrswipt Wi 
height: 436px; list-style-type: none; 
margin: @ auto; display: inline-block; 
float: left; 
.ifrswipt ul { position: relative; 
position: absolute; margin: Opx 8px Opx 7px; 
width: 3666px; } 
overflow: hidden; -imgswipt{ 
top: QOpx; cursor: pointer; 
left: Opx; border: solid Spx #FFF; 3 
. 2 
图 18-5 图 18-6 
提示 此 处 添加 的 CSS 样式 主要 是 实现 页 面 中 多 个 ji 标签 中 的 图 像 能 够 在 同一 行 中 进 


行 显示 ， 并 且 对 图 像 添加 了 边框 的 效果 。 


EE 王 接 下 来 需要 添加 JavaScript 代码 ， 通 过 swipeleft 与 swiperight 事件 实现 在 屏幕 中 左右 滑 
动 浏览 图 像 的 效果 。 转 换 到 页 面 的 HTML 代码 中 , 在 jQuery Mobile 页 面 的 结束 标签 之 后 添加 相应 
的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 
// 全 局 命名 空间 
var swiptimg={ 
$index: 0, 
$width: 320, 
$swipt: 0, 
$legth: 6 
} 
Var $imgul = $("#ifrswipt"); 
$(".imgswipt") .each (function() { 
$(this) .swipeleft (function() { 
if (swiptimg.$index< swiptimg.$legth) { 
swiptimg.$indext++; 
swiptimg.$swipt =-swiptimg.$index* swiptimg.$width; 
$imgul .animate({ left: swiptimg.$swipt }, "slow"); 
3 
}) .swiperight (function() { 
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if (swiptimg.$index >0){ 
swiptimg.$index——; 
swiptimg.$swipt = -swiptimg.$index* swiptimg.$width; 
$imgul .animate ({ left: swiptimg.$swipt }, "slow"); 
} 
让 
}) 


</script> 


在 JavaScript 脚本 代码 中 首先 定义 了 一 个 全 局 性 对 象 swiptimg， 在 该 对 象 中 设置 需要 使 用 的 变 
量 ， 并 将 获取 的 图 片 加 载 框架 元 素 保存 在 $imgul 变量 中 。 

无 论 是 将 图 片 绑 定 swipeleft 事件 还 是 swiperight 事件 ， 都 需要 调用 each() 方法 遍历 全 部 图 片 。 
在 遍历 时 ， 通 过 $(this) 对 象 获取 当前 的 图 片 元 素 ， 并 将 它 与 swipeleft 和 swiperight 事件 相 绑 定 。 

在 swipeleft 事件 中 ， 先 判断 当前 图 片 的 索引 变量 swiptimg.$index 值 是 否 小 于 图 片 总 量 
值 $swiptimg.$legth， 如 果 成 立 ， 索 引 变 量 自动 增加 1， 然 后 将 需要 滑动 的 长 度 值 保存 到 变量 
swiptimg.$swipt 中 。 然 后 ， 通 过 前 面 保存 元 素 的 $imgul 变量 调用 jQuery 的 animate() 方法 ， 以 
动画 的 方式 向 左边 移动 指定 的 长 度 。 

在 swiperight 事件 中 ， 由 于 是 向 右 滑 动 ， 因 此 先 判 断 当 前 图 片 的 索引 变量 swiptimg.$index 的 
值 是 否 大 于 0， 如 果 成 立 ， 说 明 整 个 图 片 框架 已 向 左边 滑动 过 ， 索 引 变量 自 动 减少 1。 然 后 ， 获 取 
滑动 时 的 长 度 值 并 保存 到 变量 swiptimg.$swipt 中 。 最 后 ， 通 过 前 面 保存 元 素 的 $imgul 变量 调用 
jQuery 的 animate() 方法 ， 以 动画 的 方式 向 右边 移动 指定 的 长 度 。 
[ 驮 国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 在 页 面 中 可 以 向 左 或 向 右 滑动 屏幕 来 浏 
览 图 像 ， 如 图 18-7 所 示 。 

















图 18-7 


每 次 滑动 的 长 度 值 都 与 当前 图 片 的 索引 变量 相连 ， 因 此 每 次 的 滑动 长 度 都 会 不 
一 样 ; 另外 ， 图 片 加 载 完成 后 ， 根 据 滑动 的 条 件 ， 必 须 按照 先 从 右 侧 滑 动 至 左 侧 ， 
然后 再 从 左 侧 滑动 至 右 侧 的 顺序 进行 ， 其 中 每 次 滑动 时 的 长 度 和 图 片 总 数 变量 读者 
可 以 自行 修改 。 
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在 jQuery Mobile 中 ， 屏 幕 滚动 事件 包含 两 种 类 型 : 一 种 为 开始 滚动 事件 scrollstart; 另 一 种 为 
结束 滚动 事件 scrollstop 。 这 两 种 类 型 的 事件 主要 区 别 在 于 触发 时 间 不 同 ， 前 者 是 用 户 开始 滚动 屏幕 
中 页 面 时 触发 ， 而 后 者 是 用 户 停止 滚动 屏幕 中 页 面 时 触发 。 


实现 滚动 改变 元 素 背 景 样式 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 18 章 \18-2-3.html 。 视频 : 光盘 \ 视 频 \ 第 18 章 \18-2-3.mp4 


[GE 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \18-2-3.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
吨 轴 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 关于 我 们 </h1></div> 
<div data-role="content"> 
<div id="main"> 
<h2><img src="images/182301.png" alt=""></h2> 
<p> 七 彩 光 年 工作 室 是 专业 从 事 互联 网 相关 业务 开发 的 公司 。 专 门 提供 全 方位 的 优质 服务 和 最 专 
业 的 网 站 建设 方案 为 企业 打造 全 新 电子 商务 平台 。 七 彩 光 年 工作 室 成 立 于 1999 年 ， 已 经 成 为 国内 著名 的 网 站 
建设 提供 商 。 八 年 的 风雨 历程 已 成 功 的 为 中 国教 育 部 、 中 国文 化 部 、 国 有 资 监督 管理 委员 会 . . . . . . </p> 
<h3> 我 们 的 团队 </h3> 
<p> 成员 都 具有 多 年 的 实际 设计 工作 经 验 , 更 好 的 满足 客户 的 国际 化 需求 。 设 计 师 由 正规 美 院 毕业 ， 
创意 的 思维 模式 ， 高 超 的 设计 技能 ， 为 您 提供 最 适合 您 的 设计 方案 。</p> 
<h3> 我 们 的 承诺 </h3> 
<p> 本 工作 室 设计 与 制作 的 网 站 均 属 原创 、 不 套用 网 上 的 任何 模板 ， 根 据 每 个 公司 的 行 点 ， 设 计 
出 属于 客户 .... . </p> 
<p><em> 更 多 >></em></p> 
<br> 
<span></span> 
</div> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


在 所 创建 的 jQuery Mobile 页 面 的 内 容 区 域 中 添加 <div> 标签 ， 并 为 该 div 元 素 设 置 id 名 称 为 
main， 后 面 将 通过 JavaScript 脚本 代码 对 该 id 名 称 的 div 元 素 进行 设置 和 操作 。 
[国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 效果 ， 如 图 18-8 所 
示 。 新 建 外 部 CSS 样式 表 文 件 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \style\18-2-3.css”。 在 
<head> 与 </head> 标签 之 间 添 加 <link> 标签 链接 刚 创 建 的 外 部 CSS 样式 表 文 件 ， 如 图 18-9 
所 示 。 
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<head> 
<meta charset="utf-8"> 
志和 的 宗 设 计 工作 给 更 好 的 再 专 |] <titte> 实 现 滚动 改变 元 素 背景 样式 </titLe> 
PI Oman, Mame | | <meta name="viewport" content="width=device-width, initial-scale=1"> 
2 <Link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
a <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
ll <link rel="stylesheet" href="style/18-2-3.css" /> 


<Teagy 














图 18-8 图 18-9 


区 在 外 部 CSS 样式 表 文 件 中 创建 相应 的 CSS 样式 ， 对 jQuery Mobile 页 面 中 内 容 区 域 的 元 
素 进 行 控制 ， 如 图 18-10 所 示 。 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 
的 效果 ， 如 图 18-11 所 示 。 
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图 18-10 图 18-11 


通过 创建 相应 的 CSS 样式 ， 对 页 面 中 id 名 为 main 的 div 中 的 内 容 进 行 设置 ， 
设置 内 容 的 外 观 表现 效果 。 


国 畏 ” 接 下 来 需要 添加 JavaScript 代码 ， 通 过 scrollstart 与 scrollstop 事件 实现 在 页 面 中 相应 
的 区 域 开始 滚动 和 停止 滚动 时 改变 元 素 的 背景 颜色 和 文字 颜色 。 转 换 到 页 面 的 HTML 代码 中 , 在 
<head> 与 </head> 标签 之 间 添 加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 
$ (function()f{ 
$("#main") .on("scrollstart", function(){ // 触发 开始 滚动 事件 
$ ("Hmain") .css ("background-color™, "#F37521"); // 改变 元 素 背景 颜色 
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$("#mainn) .css ("color", "#FFFFFEF"); // 改变 元 素 文本 颜色 
alert (" 触发 滚动 事件 ! "); // 弹出 提示 框 
Ds; 

$("#main") .on ("scrollstop", function(){ // 触发 结束 滚动 事件 
$ ("#main") .css ("background-color", "#CFEAF3") ; // 改变 元 素 背景 颜色 
$("#main") .css ("color", "#1E708B"); // 改变 元 素 文本 颜色 
$ ("span") .html (" 滚动 结束 "); // 为 元 素 赋予 内 容 
La: 

}) 

</script> 


在 该 部 分 JavaScript 脚本 代码 中 ， 当 页 面 中 id 名 称 为 main 的 元 素 开始 滚动 时 ， 触 发 
scrollstart 事件 ， 在 该 事件 中 将 id 名 称 为 main 的 元 素 的 背景 颜色 和 文字 颜色 进行 重新 设置 ， 并 弹出 
提示 信息 窗口 。 

当 页 面 中 id 名 称 为 main 的 元 素 停止 滚动 时 ， 触 发 scrollstop 事件 ， 在 该 事件 中 将 id 名 称 为 

main 的 元 素 的 背景 颜色 和 文字 颜色 进行 重新 设置 ， 并 为 span 元 素 赋予 文字 内 容 。 
E 国 ”保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 内 容 区 域 默 认 的 效果 ， 如 
图 18-12 所 示 。 在 内 容 区 域 进行 滚动 操作 ， 可 以 看 到 触发 滚动 开始 事件 时 内 容 区 域 的 背景 颜色 和 文 
字 颜 色 发 生 改变 ， 并 且 弹 出 提示 对 话 框 ， 如 图 18-13 所 示 。 单 击 提示 对 话 框 中 的 “确定 ”按钮 ， 停 
止 滚动 操作 ， 可 以 看 到 触发 滚动 停止 事件 时 内 容 区 域 的 背景 颜色 和 文字 颜色 ， 并 且 在 相应 的 元 素 中 显 
示 文 字 内 容 ， 如 图 18-14 所 示 。 


基业 工作 重生 业 从 联网 相 站 开光 
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提示 iOS 系统 中 的 屏幕 在 滚动 时 将 停止 DOM 的 操作 ， 停 止 滚动 后 再 按 队列 执行 已 
终止 的 DOM 操作 ， 因 此 在 这 样 的 系统 中 ， 屏 幕 的 滚动 事件 将 无 效 。 
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在 jQuery Mobile 事件 中 ， 当 用 户 使 用 移动 终端 设备 浏览 页 面 时 ， 如 果 手 持 设备 的 方向 发 生变 
化 ， 即 横向 或 纵向 手持 时 ， 将 触发 orientationchange 事件 。 在 该 事件 中 ， 通 过 获取 回调 函数 中 返回 
对 象 的 orientation 属性 ， 可 以 判断 用 户 手持 设备 的 当前 方向 。 该 属性 有 两 个 值 ， 分 别 为 portrait 和 
landscape， 前 者 表示 纵向 垂直 ， 后 者 表示 横向 水 平 。 


检测 移动 设备 手持 方向 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 18 章 \18-2-4.html 。 视频 : 光盘 \ 视 频 \ 第 18 章 \18-2-4.mp4 


[GE 新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \18-2-4.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <“meta> 标签 ,设置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 的 
案例 相同 。 

EE 玫 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"><h1> 关于 我 们 </h1></div> 
<div data-role="content"> 
<div id="main"> 
<span id="orientation"></span> 
<img src="images/182401.jpg" alt=""> 
<p> 七 彩 光 年 工作 室 是 专业 从 事 互联 网 相关 业务 开发 的 公司 ， 专 门 提供 全 方位 的 优质 服务 和 最 专业 的 
网 站 建设 方案 ,为 企业 打造 全 新 电子 商务 平台 。 七 彩 光 年 工作 室 成 立 于 1999 年 ， 已 经 成 为 国内 著名 的 网 站 建 
设 提供 商 。 八 年 的 风雨 历程 已 成 功 地 为 中 国教 育 部 、 中 国文 化 部 、 国 有 资 监督 管理 委员 会 … </p> 
<h3> 我 们 的 团队 </h3> 
<p> 成 员 都 具有 多 年 的 实际 设计 工作 经 验 ， 更 好 地 满足 客户 的 国际 化 需求 。 设 计 师 由 正规 美 院 毕业 ， 
具备 创新 的 思维 模式 和 高 超 的 设计 技能 ， 为 您 提供 最 适合 的 设计 方案 。</p> 
<h3> 我 们 的 承诺 </h3> 
<p> 本 工作 室 设计 与 制作 的 网 站 均 属 原创 ， 不 套用 网 上 的 任何 模板 ， 根 据 每 个 公司 的 行 点 ， 设 计 出 属 
于 客户 …… </p> 
<p><em> 更 多 >></em></p> 
</div> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 


</div> 


[本 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 效果 ， 如 图 18-15 所 
示 。 新 建 外 部 CSS 样式 表 文 件 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \style\18-2-4.css”。 在 
<head> 与 </head> 标签 之 间 添 加 <link> 标签 链接 刚 创建 的 外 部 CSS 样式 表 文件 ， 如 图 18-16 
所 示 。 


@434 









七 末 光 年 工作 宣 是 专业 从 事 互 联网 相关 画 开发 的 公 
司 ,专门 机 供 全 方位 的 优质 服务 和 最 专业 的 网 站 下 设 
方 ,为 企业 打 这 全 新 电子 商务 平台 ， 七 困 光 年 工作 
吉成 立 于 1999 年 , 已 和 成 为 国内 蓉 名 的 网 站 建 提 
供 商 。/ 作 年 的 风 两 历程 已 夺 功 地 为 中 国教 育 部 、 中 国 
文化 如 ， 国 有 次 站 多 于 委员 会 


我 们 的 团队 


成 页 者 内 有 多 年 的 实际 设计 工作 经 验 ， 更 好 地 测 足 吉 
疡 的 国际 化 和 求 。 设 计 师 由 正 规 半 中 毕业 ,具备 创新 tylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 


tm <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 





<head> 
‘<meta charset="utf-8"> 
<title> 测 检 移动 设备 手持 方向 </title> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 




















图 18-15 图 18-16 


轴 在 外 部 CSS 样式 表 文 件 中 创建 相应 的 CSS 样式 ， 对 jQuery Mobile 页 面 中 内 容 区 域 的 元 
素 进行 控制 ， 如 图 18-17 所 示 。 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 
的 效果 ， 如 图 18-18 所 示 。 
*{ 


margin: Opx; 
padding: Opx; 











} #main p { 
min text-indent: 28px; 
width: auto; ¥ 
height: auto; 
overflow: hidden; de 
background-color: #FFF; font-size: 16px; 
padding: 10px; font-weight: bold; 
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font-size: 14px; } 下? 二 有 0 
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| ss font-weight: bold; 
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height: auto; 和 line-height: 36px; 

















图 18-17 图 18-18 


EE 国 接 下 来 需要 添加 JavaScript 代码 ， 通 过 orientationchange 事件 实现 判断 移动 设备 的 手持 
方向 ， 并 根据 方向 对 页 面 元 素 的 相关 属性 进行 设置 。 转 换 到 页 面 的 HTML 代码 中 ， 在 <head> 
与 </head> 标签 之 间 添 加 相应 的 JavaScript 脚本 代码 。 


<script type="text/javascript"> 
$ (document) .on ("pageinit",function(event){ 
$ (window) .on ("orientationchange", function (event){ 
if (event .orientation=="landscape") { // 判断 当前 屏幕 方向 是 否 是 水 平方 向 
$("#orientation") .text (“现在 是 水 平 模式 | ") ; // 为 元 素 赋予 文本 内 容 
$("#main") .css ("background-color", "#F0FBFF") ; // 改变 元 素 背景 颜色 
$("#main") .css ("color", "#1E708B"); // 改变 元 素 文 本 颜色 
1 
if (event .orientation=="portrait") {  // 判断 当前 屏幕 方向 是 否 是 垂直 方向 
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$("#orientation") .text (" 现在 是 垂直 模式 | ") ; // 为 元 素 赋予 文本 内 容 

$ ("#main") -css("background-color"v"#EFEFEFFF"); // 改变 元 素 背 景 颜色 
$("#main") .css ("color"™, "#333333"); // 改变 元 素 文本 颜色 

BE 


}) 


</script> 


在 以 上 的 JavaScript 代码 中 , 实现 在 页 面 加 载 时 , 将 window 元 素 绑 定 orientationchage 事件 ， 
window 元 素 是 指 整个 屏幕 窗口 。 在 该 事件 的 回调 函数 中 ， 通 过 传 回 的 orientation 属性 值 检测 用 户 
移动 设备 的 手持 方向 。 如 果 为 landscape， 则 为 id 名 称 为 orientation 的 元 素 设置 文本 内 容 “ 现 在 是 
水 平 模式 ! ”， 并 改变 id 名 称 为 main 的 元 素 的 背景 颜色 和 文字 颜色 。 

如 果 为 56iiait 则 为 id 名 称 为 orientation 的 元 素 设置 文本 内 容 “ 现 在 是 垂直 模式 ! ”， 并 改 

变 id 名 称 为 main 的 元 素 的 背景 颜色 和 文字 颜色 。 
国 6” 保存 页 面 , 在 Opera Mobile 模拟 器 中 预览 该 页 面 ,默认 情况 下 设备 屏幕 是 以 垂直 方向 显示 的 ， 
效果 如 图 18-19 所 示 。 单 击 Opera Mobile 模拟 器 下 方 的 “旋转 设备 屏幕 ”按钮 路， 可 以 看 到 当 设 
备 屏 幕 为 水 平方 向 时 的 页 面 效 果 ， 如 图 18-20 所 示 。 再 次 单 击 该 按钮 ， 可 以 将 设备 屏幕 转换 为 垂直 
方向 ， 效 果 如 图 18-21 所 示 。 
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图 18-20 





提示 如 果 设 备 的 屏幕 方向 发 生 改变 时 需要 获取 设备 屏幕 的 宽度 和 高 度 ， 可 以 绑 定 
resize 事件 。resize 事件 在 页 面 大 小 发 生 改变 时 就 会 被 触发 。 





jQuery Mobile 作为 jQuery 插件 库 的 附属 成 员 , 其 轻 量 级 的 UI 框架 、 相 对 其 他 语言 的 低 学 习 成 本 ， 
都 是 受到 青睐 的 原因 。 但 是 作为 一 个 新 型 的 移动 框架 ， 在 使 用 它 开 发 项 目的 过 程 中 ， 还 有 许多 需要 注 
意 的 地 方 。 本 节 将 向 读者 介绍 一 些 jQuery Mobile 的 常用 技巧 。 
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在 jQuery Mobile 中 ，<ul> 列表 的 使 用 十 分 频繁 ， 几 乎 所 有 需要 加 载 大 量 格式 化 数据 的 时 候 都 
会 考虑 使 用 该 元 素 。 为 了 单 击 列表 选项 时 链接 某 个 页 面 ， 在 列表 的 <li> 选项 元 素 中 ， 常 常会 增加 一 个 
<a> 元 素 ， 用 于 实现 单 击 列表 项 进行 链接 的 功能 。 一 旦 添加 <a> 标签 后 ，jQuery Mobile 默认 会 在 
列表 项 的 最 右 侧 自动 增加 一 个 圆 形 背景 的 小 箭头 图 标 ， 用 来 表示 列表 中 的 项 是 一 个 超 链接 。 

当然 ， 在 实际 的 开发 过 程 中 ， 开 发 者 可 以 通过 修改 数据 集中 的 图 标 属性 data-icon ， 实 现 该 小 科 
头 图 标 开启 与 禁用 的 功能 。 


开启 或 禁用 列表 项 中 的 图 标 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 18 章 \18-3-1.html 。 视频 : 光盘 \ 视 频 \ 第 18 章 \18-3-1.mp4 


[GE 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \18-3-1.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
葬 醒 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"> 
<div data-role="navbar"> 
<ul> 
<li><a href="#pagel" class="ui-btn-active"> 启用 </a></1i> 
<1i><ahref="#page2"> 禁用 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="content"> 
<ul data-role="listview" data-divider-theme="b"> 
<li data-role="1list-divider"> 电影 大 片 </1i> 
<1i><a href="#"> 欧美 电影 </a></1i> 
<1i><a href="#"> 日 韩 电影 </a></1i> 
<1i><a href="#"> 国产 电影 </a></1i> 
<li data-role="1ist-divider"> 热 播 电视 剧 </1i> 
<1i><a href="#"> 卫视 热 播 </a></1i> 
<1i><a href="#"> 国外 电视 剧 </a></1i> 


</ul> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
<!-- 第 2 页 --> 


<div id="page2" data-role="page"> 


<div data-role="header"> 
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<div data-role="navbar"> 
<ul> 
<li><a href="#pagel"> 启 用 </a></1i> 
<li><a href="#page2" class="ui-btn-active"> 禁 用 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="content"> 
<ul data-role="listview"data-divider-theme="b"> 
<li data-role="list-divider"> 电影 大 片 </1i> 
<li data-icon="false"><a href="#"> 欧美 电影 </a></1i> 
<li data-icon="false"><a href="#"> 日 韩 电影 </a></1i> 
<li data-icon="false"><a href="#"> 国产 电影 </a></1i> 
<li data-role="1ist-divider"> 热 播 电视 剧 </1i> 
<li data-icon="false"><a href="#"> 卫视 热 播 </a></1i> 
<1li data-icon="false"><a href="#"> 国外 电视 剧 </a></1i> 
</ul> 
</div> 
<div data-role="footer"<h4> 页 脚 </h4></div> 


</div> 
</body> 
提示 通过 在 列表 项 <li> 标签 中 添加 data-icon 属性 设置 ， 可 以 开启 或 禁用 列表 项 右 
侧 的 图 标 显示 状态 , 该 属性 的 默认 值 为 true, 表示 显示 ; 如 果 设 置 为 false, 则 为 禁用 。 


西 5 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 默认 情况 下 ， 列 表 元 素 中 添加 了 <a> 
标签 的 元 素 都 会 在 右 侧 显示 图 标 效 果 ， 如 图 18-22 所 示 。 单 击 导航 栏 中 的 “禁用 ”和 链接， 切换 到 
page2 页 面 中 ， 可 以 看 到 禁用 右 侧 图 标的 效果 ， 如 图 18-23 所 示 。 


启用 禁用 启用 禁用 
电影 大 片 电影 大 片 


欧美 电影 欧美 电影 
日 韩 电影 日 韩 电影 
国产 电影 国产 电影 
卫视 热 播 卫视 热 播 
国外 电视 剧 国外 电视 剧 
页 脚 页 脚 
图 18-22 图 18-23 
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如 果 在 data-role 属性 值 为 button 的 <a> 标签 中 ，data-icon 属性 值 为 按钮 
中 的 图 标 名 称 , 例如 设置 data-icon 属性 值 为 delete, 则 该 超 链接 显示 为 一 个 “删除 ” 
按钮 图 标 。 也 可 以 将 该 属性 值 设 置 为 true 或 false， 用 来 开启 或 禁用 按钮 中 图 标的 
显示 状态 。 





在 移动 设备 的 浏览 器 中 查看 页 面 时 ， 默 认 页 面 滑动 是 从 上 至 下 或 从 下 至 上 的 方式 。 如 果 加 载 的 内 
容 多 页 面 比较 长 时 ， 要 从 尾部 栏 返回 头 部 栏 中 导航 条 再 单 击 链接 地 址 ， 以 这 种 方式 就 会 比较 麻烦 。 

在 头 部 栏 或 尾部 栏 的 容器 元 素 中 增加 data-position 属性 ， 设 置 该 属性 的 属性 值 为 fixed， 可 以 
将 滚动 屏幕 时 隐藏 的 头 部 栏 或 尾部 栏 在 停止 滚动 或 单 击 时 重新 出 现 ; 再 次 滚动 屏幕 时 ， 又 自动 隐藏 ， 
由 此 实现 将 头 部 栏 或 尾部 栏 以 悬浮 的 形式 固定 在 原 有 位 置 上 。 


固定 页 面 头 部 栏 与 尾部 栏 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 18 章 \18-3-2.html 。 视频 : 光盘 \ 视 频 \ 第 18 章 \18-3-2.mp4 


[GE 新 建 HTML 5 页面， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \18-3-2.html”。 在 <head> 
与 </head> 标签 之 间 添加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
葬 岂 在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 头 部 标题 </h1> 
</div> 
<div data-role="content"> 
<div id="main"> 
<img src="images/183201.png" alt=""> 
<p> …… .</p>// 内 容 省 略 
</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h4> 尾部 页 脚 </h4> 
</div> 
</div> 


国 畏 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 头 部 栏 显示 在 页 面 顶部 ， 尾 部 


栏 显示 在 页 面 尾部 ， 如 图 18-24 所 示 。 向 下 滚动 页 面 ， 当 停止 滚动 时 ， 在 页 面 顶部 和 底部 始终 显示 
头 部 栏 和 底部 栏 ， 如 图 18-25 所 示 。 
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在 工具 栏 中 还 可 以 增加 全 屏 显示 属性 data-fullscreen， 如 果 将 该 属性 的 值 设置 
为 true， 那 么 当 以 全 屏 的 方式 浏览 图 片 或 其 他 信息 时 ， 工 具 栏 仍然 以 悬浮 的 形式 显 
区 示 在 全 屏 的 页 面 上 。 与 data-position 属性 不 同 ，data-fullscreen 属性 并 不 是 在 原 
有 位 置 上 的 隐藏 与 显示 切换 ， 而 是 在 屏幕 中 完全 消失 ， 当 出 现 全 屏幕 页 面 时 ， 又 重 
新 返回 页 面 中 。 





在 jQuery Mobile 中 ， 页 面 的 加 载 过 程 与 在 jQuery 中 并 不 一 样 ， 它 可 以 很 容易 地 捕捉 到 一 些 非 
常 有 用 的 事件 ， 例 如 pagecreate 事件 ， 该 事件 是 页 面 初始 化 事件 ， 该 事件 中 所 有 请 求 的 DOM 元 素 
已 经 完成 了 创建 ， 正 在 开始 加 载 ， 此 时 用 户 可 以 自 定义 部 件 元 素 ， 实 现 一 些 自 定 义 样式 效果 ， 如 显示 
加 载 进度 条 或 随机 显示 页 面 背景 图 片 等 。 


随机 显示 页 面 背景 图 片 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 18 章 \18-3-3.html ”视频 : 光盘 \ 视 频 \ 第 18 章 \18-3-3.mp4 


[GE 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \18-3-3.html|”。 在 <head> 与 
</head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
喇 z 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div data-role="page" id="pagel"> 
<div data-role="header" data-theme="b" data-position="fixed"> 
<hl> 头 部 标题 </h1> 
</div> 
<div data-role="content"> 
<div id="main"> 
<img src="images/183305.png"alt="logo"> 
<br> 
欢迎 进入 摄影 工作 室 ! 


</div> 


Qu0 


</div> 

<div data-role="footer" data-theme="b" data-position="fixed"> 
<h4> 尾部 页 脚 </h4> 

</div> 


</div> 


编写 一 个 基本 的 jQuery Mobile 页 面 ， 分 别 在 头 部 栏 和 尾部 栏 中 添加 data-position='"fixed" 属 
性 设置 ， 固 定 头 部 栏 和 尾部 栏 的 位 置 。 
本 ”保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 效果 ， 如 图 18-26 所 
示 。 新 建 外 部 CSS 样式 表 文 件 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 18 章 \style\18-3-3.css”。 在 
<head> 与 </head> 标签 之 间 添 加 <link> 标签 链接 刚 创建 的 外 部 CSS 样式 表 文 件 ， 如 图 18-27 
所 示 。 


Im a 


PHOTO Di 


再 进入 加 于 工 





<head> 
‘<meta charset="utf-a"> 

<title> 随 机 显示 页 面 背景 图 片 </title> 

ewport" content="width=device-width, initial-scale=1"> 

"http://code. jquery.com/mobile/1.4,.5/jquery.mobile-1.4.5.min.css" /> 
code.jquery.com/jquery-1.11.1.min.js"></script> 
ry.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 














图 18-26 图 18-27 


国 3 在 外 部 CSS 样式 表 文件 中 创建 相应 的 CSS 样式 ， 对 jQuery Mobile 页 面 中 内 容 区 域 的 元 
素 进行 控制 ， 如 图 18-28 所 示 。 





bt :bge { 
margin: Opx; background-image: url(../images/183301.jpg); 
padding: Opx; background-repeat: no-repeat; 
} background-size: cover; 
smain { } 
width: 100%; .bgl { 
height: auto; 


background-image: url(../images/183302.jpg); 
background-repeat: no-repeat; 
background-size: cover; 





: 150px; 
: 微软 雅 黑 ; :important 
font-size: 14px; } 
color: #CC74B84; .bg2 { 


dei Ee background-image: url(../images/183363.jpg); 
Cs background-repeat: no-repeat; 
text-align: center; 
NO background-size: cover; 
不 中 


#main img { .bg3 { 


width: 60%; 
height: auto; 
max-width: 358px; 





background-image: url(../images/183364.jpg); 
background-repeat: no-repeat; 
background-size: cover; 














图 18-28 
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.bg0 至 .bg3 是 定义 的 4 个 背景 图 像 的 类 CSS 样式 ， 后 面 将 通过 JavaScript 
脚本 代码 来 为 页 面 随机 应 用 这 4 个 类 CSS 样式 中 的 一 个 。 


葬 国 返回 网 页 HTML 代码 中 ， 在 id 名 称 为 page1 的 元 素 中 添加 class 属性 应 用 名 为 bg0 的 类 
CSS 样式 ， 如 图 18-29 所 示 。 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 
效果 ， 如 图 18-30 所 示 ， 此 时 的 页 面 背景 是 固定 的 ， 不 会 随机 显示 不 同 的 背景 。 


feocahosvoyeoo2015n7W 二 革 


头 部 标题 





<body> 
<div data-role="page" id="pagel" class="bge"> 

<div data-role="header" data-theme="b" 
data-position="fixed"> 








<h1> 关 部 标题 </h1> 
</div> | 
<div data-role="content"> PHOTO DESIGN 
a ~ 
<img src="images/183365.png" alt="logo"> - 
<br> 
欢迎 进入 摄影 工作 室 ! 
</div> 
</div> 


<div data-role="footer" data-theme="b" 
data-position="fixed"> 








<h4> 尾 部 页 脚 </h4> 尾部 页 搂 
</div> 已 而 
- 
</div> 
</body> Samsung Ga Nore a00x1280 ppt: 285 [Ex] (50% =] 








图 18-29 图 18-30 


EE 王 ”转换 到 页 面 的 HTML 代码 中 ， 在 <head> 与 </head> 标签 之 间 添 加 相应 的 JavaScript 脚 
本 代码 。 


<script type="text/javascript"> 

$ (document) .on ("pagecreate", function() { 
var $randombg =Math.floor (Math.random() * 4); //0to3 
var $p=$("#pagel"); 
$p.removeClass ("bg0") .addClass ('bg'+$randombg); 

]) 


</script> 


在 JavaScript 代码 中 ， 先 将 0~3 之 间 的 随机 数 保存 在 变量 $randombg 中 ， 然 后 通过 jQuery 
中 的 removeClass 方法 移 除 页 面 中 相应 元 素 原 先 的 类 CSS 样式 ， 并 调用 addClass 方法 将 随机 数 
组 合 的 样式 应 用 到 相应 的 元 素 中 去 ， 从 而 实现 页 面 背景 图 像 随 机 显示 的 功能 。 

[国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 随机 显示 的 页 面 背景 效果 ， 每 
刷新 一 次 页 面 ， 都 可 能 会 显示 不 同 的 页 面 背景 ， 如 图 18-31 所 示 。 
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如 果 jQuery Mobile 页 面 以 动态 方式 加 载 的 内 容 较 多 时 ， 可 以 在 pagecreate 
事件 中 定义 一 个 进度 条 图 片 ， 在 数据 开始 加 载 时 显示 该 图 片 ， 加 载 完成 后 自动 隐藏 
该 图 片 ， 从 而 提升 用 户 体验 。 








本 章 向 读者 介绍 了 jQuery Mobile 的 基本 配置 项 ， 并 且 向 读者 介绍 了 一 些 常用 事件 的 使 用 方法 ， 
使 读者 能 够 掌握 在 jQuery Mobile 页 面 中 绑 定 事件 的 处 理 技巧 。 完 成 本 章 内 容 的 学 习 ， 读 者 需要 掌握 
常用 的 jQuery Mobile 事件 方法 , 为 全 面 掌 握 jQuery Mobile 提供 的 API 使 用 方法 打下 扎实 的 基础 。 
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hbA 
上 本 章 知 识 点 
第 19 章 使 用 jQuery 了 解 jQuery Mobie 括 4 的 外 
Mobile 插件 v ee ActionSheet 插 件 


实现 弹出 窗口 的 方法 
MW 掌握 使 用 mmenu 插件 实现 
侧 边 菜单 效果 


jQuery Mobile 具有 很 强 的 可 拓展 性 ， 在 jQuery Mobile 
移动 应 用 开发 过 程 中 可 以 直接 融入 许多 优秀 的 jQuery Mobile 
插件 ， 从 而 使 得 移动 应 用 的 开发 更 加 轻松 。 jQuery Mobile 插 掌握 使 用 DateBox 插件 实现 
件 主要 依赖 于 jQuery 主 库 插 件 ， 基 于 jQuery Mobile 插件 ， 日 期 和 时 间 选 择 窗口 
面向 移动 终端 设备 应 用 或 站 点 的 使 用 。 在 本 章 中 将 详细 向 读者 掌握 使 用 Mobiscrol 插件 实现 


介绍 几 款 jQuery Mobile 插件 的 使 用 方法 和 技巧 。 滚屏 选择 日 期 和 时 间 


掌握 使 用 Camera 插件 实现 
焦点 轮换 图 片 效果 
有 /掌握 使 用 Swipebox 插件 实 
-| ，” 现 单 击 查看 大 图 效果 


扩 影 图 片 欣 党 





本 节 将 向 读者 介绍 两 款 分 别 用 于 实现 对 话 框 和 侧 边 菜单 效果 的 jQuery Mobile 插件 。 其 中 
ActionSheet 插件 用 于 在 jQuery Mobile 页 面 中 实现 弹出 对 话 框 效果 , 并 且 不 需要 编写 任何 脚本 代码 。 
mmenu 插件 用 于 在 jQuery Mobile 页 面 中 实现 常见 的 侧 边 菜单 效果 。 












































ActionSheet 插件 无 须 编 写 任 何 JavaScript 代码 ， 完 全 通过 HTML 5 新 增 的 属性 进行 控制 。 
通过 引入 该 插件 ， 可 以 在 页 面 中 以 优雅 的 动画 效果 弹出 一 个 任意 的 窗口 ， 该 窗口 中 的 内 容 可 以 是 任何 
HTML 代码 元 素 。 
鉴于 该 插件 的 快捷 性 ,ActionSheet 插件 广泛 应 用 于 页 面 中 的 内 容 显 示 、 信 息 通 知 和 广告 发 布 等 。 
当然 ， 也 可 以 用 于 设置 用 户 退 出 时 弹出 的 询问 对 话 框 或 快捷 的 弹出 式 用 户 登 录 对 话 框 。 
ActionSheet 插件 完全 依靠 元 素 的 相关 属性 进行 设置 ， 使 用 相对 简单 ， 基 本 的 操作 步骤 如 下 。 
( 1 ) 在 页 面 中 添加 不 同 元 素 ， 创 建 一 个 用 于 弹出 的 窗口 标签 ， 并 设置 id 名称。 
(2) 在 页 面 中 添加 一 个 用 于 调用 弹出 窗口 的 元 素 ， 将 该 元 素 的 data-role 属性 设置 为 
actionsheet， 表 示 该 元 素 用 于 弹出 窗口 ， 再 通过 将 元 素 的 data-sheet 属性 设置 为 id 名 称 ， 最 终 实 
现 元 素 与 弹出 窗口 的 绑 定 。 
ActionSheet 插件 的 官方 下 载 地 址 如 下 。 











































































































































































































































































































https://github.com/hiroprotagonist/jquery.mobile.actionsheet 














在 使 用 该 插件 之 前 ， 需 要 在 页 面 的 <head> 与 </head> 标签 之 间 链 接 相应 的 CSS 样式 表 和 
JavaScript 脚本 文件 。 


<link href="19-1-1/css/jdquery-mobile.actionsheet.css"”rel="stylesheet" 


type="text/css"> 


<script src="19-1-1/js/jquery.mobile.actionsheet.js"></script> 


在 jQuery Mobile 页 面 中 实现 弹出 窗口 
最 终 文件 : 光盘 \ 最终 文件 \ 第 19 章 \19-1-1.html ”视频 : 光盘 \ 视 频 \ 第 19 章 \19-1-1.mp4 














新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 19 章 \19-1-1.html”。 在 <head> 














与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 的 
案例 相同 。 

















在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代 码 。 


<div id="pagel" data-role="page"> 


<div data-role="header"> 
<h1> 头 部 标题 </h1> 


<a data-icon="gear" class="ui-btn-right" data-role="actionsheet" data- 


sheet="box1l"> 退出 </a> 


<!-- 退出 弹出 提示 窗口 开始 --> 
<div id="box1l"> 
<p class="pTip"> 您 真 的 要 退出 本 系统 吗 ? </p> 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 
<a data-role="button" class="ui-btn-active"> 确定 </a> 
</div> 
<div class="ui-block-b"> 


<a data-role="button" data-rel="close"> 取消 </a> 


</div> 
</div> 
</div> 
<!-- 退出 弹出 提示 窗口 结束 --> 
</div> 


<div data-role="content"> 
<a data-icon="star" data-role="actionsheet" data-sheet="login"> 登录 </a> 
<!-- 弹出 登录 框 开始 --> 
<form id="login" action="#"> 
<span class="spanLogin"> 用 户 登录 </span> 
<input type="text" name="uname" placeholder=" 请 输入 用 户 名 "> 
<input type="password" name="upass" placeholder=" 请 输入 密码 "> 
<div class="ui-grid-a"> 


<div class="ui-block-a"> 
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<a type="submit" data-role="button" class="ui-btn-active"> 确定 </a> 
</div> 


<div class="ui-block-b"> 


<a data-role="button" data-rel="close"> 取消 </a> 
</div> 
</div> 
</form> 
<!-- 弹出 登录 框 结束 --> 


</div> 


<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


在 该 页 面 中 创建 了 两 个 弹出 窗口 ， 一 个 是 在 单 击 头 部 的 “退出 ”按钮 时 显示 弹 
出 的 信息 提示 窗口 ， 另 一 个 是 单 击 内 容 区 域 的 “登录 ”按钮 时 弹出 的 登录 窗口 。 





国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 效果 ， 如 图 19-1 所 示 。 


返回 jQuery Mobile 页 面 中 ， 在 <head> 与 </head> 标签 之 间 添 加 代码 ， 引 用 ActionSheet 插件 
的 相关 CSS 样式 表 文件 和 javaScript 文件 ， 如 图 19-2 所 示 。 








基部 标 是 Ons 
您 真 的 要 退出 本 系统 吗 了 
时 录 <heady 
用 户 潮 录 ‘<meta charset="utf 
-一 <title> 在 jQuery Mob11 项 面 中 诡 现 关 出 商 口 。 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1 
ye <tink rel="stylesheet" href= 
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
Ip aero 
HE 





/eos foecy een/ ery came Er 
p:/ 1.4.5 


er mobile.actionsheet.cs: 


rr esrtext/cssa 
5 <script src="19-1-1/js/jquery.mobile.actionsheet.js"></script> 








图 19-1 图 19-2 


默认 情况 下 ， 并 没有 对 弹出 窗口 中 的 内 容 进行 隐藏 ， 所 以 在 预览 页 面 时 ， 页 面 
中 的 所 有 内 容 都 会 直接 显示 出 来 。 





区 保存 页 面 , 在 Opera Mobile 模拟 器 中 预览 该 页 面 , 效果 如 图 19-3 所 示 。 单 击 头 部 的 “退出 ” 
安 已 | 


示 头 部 的 “ 退 
按钮 ， 可 以 看 到 弹出 的 信息 提示 窗口 ， 如 图 19-4 所 示 。 单 击 内 容 区 域 的 “登录 ”按钮 ， 可 以 看 到 弹 
出 的 登录 表单 窗口 ， 如 图 19-5 所 示 。 
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头 部 标题 


© 登录 





图 19-3 图 19-4 图 19-5 


过 程 不 需要 编写 任何 的 JavaScript 脚本 代码 ， 只 需要 把 握 两 个 元 素 间 的 放置 顺序 关 


使 用 ActionSheet 插件 创建 弹出 窗口 ， 并 与 指定 的 链接 元 素 相 绑 定 ， 其 实现 的 
| 系 ， 并 通过 添加 data-role 和 data-sheet 属性 ， 将 两 者 进行 绑 定 。 


mmenu 插件 是 一 款 创 建 滑动 导航 菜单 的 jQuery Mobile 插件 ， 只 需要 短 短 几 行 JavaScript 脚 
本 代码 ， 就 可 以 在 移动 网 站 中 实现 类 似 于 移动 APP 外 观 的 非常 炫 酷 的 侧 边 菜单 效果 。 

mmenu 插 件 不 仅 为 开发 者 提供 了 诸如 打开 、 关 闭 、 切 换 等 常用 的 菜单 功能 , 还 提供 了 菜单 位 置 ( 居 
左 和 居 右 ) 、 是 否 显示 菜单 项 计数 器 等 选项 的 设置 。 

mmenu 插件 的 官方 下 载 地址 如 下 。 


http://mmenu.frebsite.nl/download.html 


在 使 用 该 插件 之 前 ， 需 要 在 页 面 的 <head> 与 </head> 标签 之 间 链 接 相应 的 CSS 样式 表 和 
JavaScript 脚本 文件 。 


<link href="19-1-2/css/mmenu.css" rel="stylesheet" type="text/css"> 
<script src="19-1-2/js/jquery-1.9.1.min.js"></script> 


<script src="19-1-2/js/jquery.mmenu.min.js"></script> 


制作 侧 边 菜单 效果 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 19 章 \19-1-2.html 。 视频 : 光盘 \ 视 频 \ 第 19 章 \19-1-2.mp4 


GE ”新建 HTML 5 页面， 将 其 保存 为 “光盘 \ 源 文件 \ 第 19 章 \19-1-2.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 的 
案例 相同 。 

葬 出 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


47©@ 


<div id="pagel" data-role="page"> 
<div data-role="header" data-theme="b"> 
<div><a href="#menu"><img src="19-1-2/images/191202.png"></a></div> 
<h1l> 侧 边 菜单 </h1> 
<!-- 侧 边 菜单 开始 --> 
<nav id="menu"> 
<ul> 
<li class="Selected"><a href="#"> 首 页 </a></1i> 
<li><a href="#"> 关 于 我 们 </a></1i> 
<1i><a href="#"> 设计 作品 </a></1i> 
<1i><a href="#"> 服务 项 目 </a></1i> 
<1i><a href="#"> 联系 我 们 </a></1i> 
</ul> 
</nav> 
<!-- 侧 边 菜单 结束 --> 
</div> 
<div data-role="content"></div> 


</div> 


国 3 轩 保存 页 面 ,在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 默认 效果 ， 如 图 19-6 
所 示 。 新 建 外 部 CSS 样式 表 文 件 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 19 章 \19-1-2\css\style. 
css”， 在 该 CSS 样式 表 文件 中 创建 相应 的 CSS 样式 ， 如 图 19-7 所 示 。 
ba 

margin: Opx; 

padding: Opx; 








.Ui-page-theme-f { 
background-image: url(../images/191201.jpg); 
background-repeat: no-repeat; 
background-position: center top; 
background-size: cover; 














图 19-6 图 19-7 


在 jQuery Mobile 页 面 代 码 中 ， 在 header 容器 中 添加 data-theme="b" 属 
性 设置 ， 为 头 部 栏 应 用 默认 的 b 主题 。 在 CSS 样式 表 文 件 中 创建 名 为 .ui-page- 
theme-f 的 CSS 样式 ， 创 建 f 主 题 ， 在 该 主题 中 为 整个 页 面容 器 设置 背景 图 像 。 

















页 返回 jQuery Mobile 页 面 中 ， 在 <head> 与 </head> 标签 之 间 添 加 <link> 标签 链接 刚 创建 
的 外 部 CSS 样式 表 文 件 ， 在 page 容器 中 添加 data-theme 属性 设置 ， 设 置 其 属性 值 为 f， 应 用 刚 
定义 的 CSS 样式 ， 如 图 19-8 所 示 。 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 
页 面 的 背景 图 像 效 果 ， 如 图 19-9 所 示 。 








G8 








meta name= "viewport" content="width-device width, initial scale-1"> 
ylesheet" href="http://code.jquery.con/mobile/1.4.5/jquery.ncbile-1.4.5.min.css" />| 
11.1.min.js"></script> 






http://code. jquery.com/jquery- 











‘<script src="http://code. Jquery.com/nob1le/1.4.5/1query.nobile-1.4.5.min.1s"></script> 
link href="19-1-2/css/style.css" rel="stylesheet" type="text/css"> 

hes 

<body> 





<ul> 





联系 我 们 </a></Li> 














图 19-8 


图 19-9 


E 国 切换 到 style.css 文件 中 , 创建 相应 的 CSS 样式 ,如 图 19-10 所 示 。 返 回 jQuery Mobile 页 面 中 ， 
在 菜单 按钮 所 在 的 <div> 标签 中 添加 class 属性 ， 应 用 名 为 | tbn 的 CSS 样式 ， 如 图 19-11 所 示 。 





navt 
display:none; 




















.1L_tbn{ <body> 
position: absolute; <div id="pagel" data-role="page" data-theme="f"> 
left: Opx; <div data-role="header" data-theme="b"> 
et _ <div clLass="L_tbn"><a href="#menu"><img src= 
ee Ap "19-1-2/jmages/191202.png"></a></div> 
ght:28px; 
text-align: center; <h1> 侧 边 菜单 </h1> 
padding-top: 12px; -- 便 这 T 始 -- 
border-right:1px #666 solid; <nav id="menu'"> 
<ul> 
图 19-10 图 19-11 


侧 的 菜单 按钮 图 标 显示 位 置 。 





此 处 创建 名 为 nav 的 CSS 样式 ,用 于 设置 页 面 的 <nav> 标签 中 的 内 容 默 认 隐 藏 ， 
即 导航 菜单 在 默认 状态 下 是 隐藏 的 。 名 为 .|_tbn 的 类 CSS 样式 用 于 控制 头 部 栏 左 


[天 国保 存 页 面 , 在 Opera Mobile 模拟 器 中 预览 该 页 面 , 可 以 看 到 页 面 的 效果 , 如 图 19-12 所 示 。 
返回 jQuery Mobile 页 面 中 ， 在 <head> 与 </head> 标签 之 间 添 加 代码 ， 引 用 mmenu 插件 的 相关 
CSS 样式 表 文 件 和 JavaScript 文件 ， 并 编写 相应 的 JavaScript 代码 ， 如 图 19-13 所 示 。 





<head> 


<meta charset="utf-8"> 





y -com/mobi le/1 


-4.5/jquery-nobile-1.4.5.min.css" />| 
js"></script> 


.5/jqvery.mobile-1.4.5.min.js"></script> 





9-1-2/css/mmenu.css™ rr 

19-1-2/1s/jqvery-1.9. 

19-1-2/js/jquery-mmenu-min- 
xt/javascript"> 





图 19-12 图 19-13 
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EB 整个 jQuery Mobile 页 面 的 代码 如 下 。 





<div data-role="content"></div> 
</div> 
</body> 
</html> 


[ 王 困 保存 页 面 , 在 Opera Mobile 模拟 器 中 预览 该 页 面 , 可 以 看 到 页 面 的 效果 , 如 图 19-14 所 示 。 
单 击 页 面 左上 角 的 菜单 按钮 ， 可 以 在 左 侧 滑 出 并 显示 侧 边 菜单 ， 效 果 如 图 19-15 所 示 。 





表单 是 jQuery Mobile 应 用 开发 中 非常 重要 的 元 素 ， 在 本 节 中 将 介绍 两 款 用 于 选择 日 期 和 时 间 的 
jQuery Mobile 插件 ， 分 别 是 DateBox 插件 和 Mobiscroll 插件 。 通 过 使 用 插件 的 方式 能 够 轻松 地 开 
发 出 相应 功能 的 表单 元 素 。 


DateBox 插件 是 专门 用 于 jQuery Mobile 移动 应 用 的 插件 ， 通 过 该 插件 可 以 在 弹出 的 窗口 中 简 
单 直观 地 展示 一 个 日 期 与 时 间 的 对 话 框 ， 用 户 直 接 单 击 其 中 的 某 个 日 期 选项 ， 便 可 以 完成 日 期 选择 的 
操作 。 

与 其 他 用 于 jQuery Mobile 移动 应 用 中 的 日 期 型 插件 相 比 较 ，DateBox 日 期 对 话 框 插 件 在 使 用 
时 有 以 下 几 个 显著 的 特点 。 

(1) 允许 使 用 多 种 模式 输入 数据 ， 如 Android、Calendar、Slide、Flip Wheel 和 Time 模式 ， 
模式 不 同 其 弹出 的 日 期 选择 对 话 框 的 风格 也 不 相同 。 

(2) 可 以 设置 4 种 不 同 的 日 期 显示 模式 。 

(3) 使 用 时 数据 完全 本 地 化 。 

(4) 允许 对 输入 日 期 数据 的 限制 ， 如 设置 最 大 或 最 小 年 份 、 设 置 某 一 日 作为 黑 名 单 中 的 日 期 、 设 
置 特 定 的 某 一 天 等 操作 。 

(5) 自动 解析 手动 输入 或 预先 输入 的 日 期 。 

(6) 使 用 data-role="datebox" 绑 定 页 面 中 的 文本 框 元 素 ， 通 过 data-options 属性 设置 数据 的 
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各 选项 配置 。 
DateBox 插件 的 官方 下 载 地 址 如 下 。 


https://github.com/jtsage/jquery-mobile-datebox 


在 使 用 该 插件 之 前 ， 需 要 在 页 面 的 <head> 与 </head> 标签 之 间 链 接 相应 的 CSS 样式 表 和 
JavaScript 脚本 文件 。 


<link href="19-2-1/css/jqm-datebox.css" rel="stylesheet" type="text/css"> 
<script src="19-2-1/js/jqm-datebox.core.js"></script> 
<script src="19-2-1/js/jqm-datebox.mode.calbox.js"></script> 


<script src="19-2-1/js/jqm-datebox.mode.datebox.js"></script> 


实现 日 期 和 时 间 选 择 窗口 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 19 章 \19-2-1.htiml 。 视频 : 光盘 \ 视 频 \ 第 19 章 \19-2-1.mp4 


[GE 新 建 HTML 5 页面， 将 其 保存 为 “光盘 \ 源 文件 \ 第 19 章 \19-2-1.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
葬 醒 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header" data-theme="b"> 
<h1> 日 期 和 时 间 选 择 插件 </h1> 
</div> 
<div data-role="content"> 
<p> 选择 日 期 : </p> 
<input type="text" name="langl" id="langl" readonly data-role="datebox" 
data-options='{"mode":"calbox"}'> 
<p> 选择 时 间 : </p> 
<input type="text" name="lang2" id="lang2" readonly data-role="datebox" 
data-options='{"mode":"timebox"}'> 
</div> 
<div data-role="footer" data-theme="b"><h4> 页 脚 </h4></div> 


</div> 


在 页 面 中 创建 了 两 个 文本 域 表单 元 素 ， 一 个 用 于 选择 日 期 ， 一 个 用 于 选择 时 间 。 在 两 个 文本 域 
的 <input> 标签 中 都 设置 data-role 属性 值 为 datebox， 在 选择 日 期 的 文本 域 标签 中 设置 data- 
options 属性 值 为 人 "mode":"calbox"}， 在 选择 时 间 的 文本 域 标签 中 设置 data-options 属性 值 为 
{"mode":"timebox"}。 浏 览 该 页 面 时 ， 将 在 文本 域 的 右 侧 显 示 一 个 圆 形 小 图 标 ， 单 击 该 图 标 ， 将 弹出 
相应 的 日 期 或 时 间 选 择 对 话 框 。 
EEE 国 ”保存 页 面 , 在 Opera Mobile 模拟 器 中 预览 该 页 面 , 可 以 看 到 页 面 的 效果 , 如 图 19-16 所 示 。 
返回 jQuery Mobile 页 面 中 ， 在 <head> 与 </head> 标签 之 间 添 加 代码 ， 引 用 DateBox 插件 的 相 
关 CSS 样式 表 文 件 和 javaScript 文件 ， 如 图 19-17 所 示 。 
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日 期 和 时 间 选 择 插件 ee 本 
<meta charset="utf-8"> 
<tittLe> 广 现 日 期 和 时 间 选 择 窗口 </tittLe> 
iewport" content="width=device-width,initial-scale=1"> 











wl <link rel="stylesheet" href= 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

国生 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 


</script> 
[<Uink href="19-2-1/css/jam-datebox.css" rel="stylesheet" type="text/css"> 
<script src="19-2-1/js/jqm-datebox.core.js"></script> 


<script src="19-2-1/js/jqm-datebox.mode.calbox.js"></script> 


<script src="19-2-1/js/jam-datebox.mode.datebox.js"></script> 











图 19-16 图 19-17 
区 ”整个 jQuery Mobile 页 面 的 代码 如 下 。 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 实现 日 期 和 时 间 选 择 窗口 </title> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mo- 
bile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. 
js"></script> 
<link href="19-2-1/css/jqm-datebox.css" rel="stylesheet" type="text/css"> 
<script src="19-2-1/js/jqm-datebox.core.js"></script> 
<script src="19-2-1/js/jqm-datebox.mode.calbox.js"></script> 
<script src="19-2-1/js/jqm-datebox.mode.datebox.js"></script> 
</head> 
<body> 
<div id="pagel" data-role="page"> 
<div data-role="header" data-theme="b"> 
<h1> 日 期 和 时 间 选 择 插件 </h1> 
</div> 
<div data-role="content"> 
<p> 选择 日 期 : </p> 
<input type="text" name="langl" id="langl" readonly data-role="datebox" data- 
options='{"mode":"calbox"}'> 
<p> 选择 时 间 : </p> 
<input type="text" name="lang2" id="lang2" readonly data-role="datebox" data- 
options='{"mode":"timebox"}'> 
</div> 
<div data-role="footer" data-theme="b"><h4> 页 脚 </h4></div> 
</div> 
</body> 
</html> 
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[国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 单 击 选择 日 期 文本 域 右 侧 的 图 标 ， 可 以 
在 弹出 的 对 话 框 中 选择 日 期 ， 如 图 19-18 所 示 。 单 击 选择 时 间 文 本 域 右 侧 的 图 标 ， 可 以 在 弹出 的 对 
话 框 中 选择 时 间 ， 如 图 19-19 所 示 。 


Set Date 


October 2015 


Set Time 
Tu We Th 


29 30 1 


Set Time 





图 19-18 图 19-19 
因为 所 使 用 的 插件 都 是 由 国外 开发 的 ， 所 以 对 话 框 中 的 提示 文本 都 是 英文 ， 如 
国 果 用 户 需要 对 话 框 中 的 提示 文字 显示 为 中 文 ， 则 需要 在 所 链接 的 JavaScript 脚本 文 
本 中 找到 相应 的 文字 进行 修改 。 


在 页 面 中 输入 日 期 或 时 间 是 一 件 很 麻烦 的 事情 ， 因 为 考虑 到 日 期 或 时 间 的 特殊 性 ， 往 往 需 要 对 输 
入 的 格式 与 内 容 进 行 有 效 性 验证 。 而 在 移动 终端 的 浏览 器 中 ， 这 样 的 验证 还 将 更 为 复杂 。 为 了 解决 这 
一 问题 ， 可 以 引用 专门 针对 移动 项 目 开 发 的 滚动 选择 时 间 插 件 Mobiscroll。 

Mobiscroll 插件 默认 风格 是 以 触摸 屏 的 方式 ， 通 过 滚动 屏幕 来 选择 日 期 或 时 间 的 值 。 当 然 也 可 以 
自 定义 选择 日 期 或 时 间 的 风格 , 如 Android、iOS 等 。 该 插件 专门 针对 移动 触摸 设备 设计 的 UI 效果 ， 
广泛 应 用 于 众多 的 移动 应 用 项 目 中 。 

Mobiscroll 插件 的 使 用 方法 也 很 简单 ， 只 需要 经 过 以 下 两 个 步骤 ， 就 可 以 实现 单 击 绑 定 的 文本 框 
时 弹出 选择 日 期 或 时 间 的 窗口 。 基 本 的 操作 步骤 如 下 。 

( 1 ) 在 页 面 中 为 相应 的 文本 域 元 素 设置 id 名 称 。 

( 2 ) 编写 相应 的 JavaScript 脚本 代码 ， 将 文本 域 元 素 与 插件 绑 定 。 

Mobiscroll 插件 的 官方 下 载 地 址 如 下 。 


http://mobiscroll.com/ 


在 使 用 该 插件 之 前 ， 需 要 在 页 面 的 <head> 与 </head> 标签 之 间 链 接 相应 的 CSS 样式 表 和 
JavaScript 脚本 文件 。 


<link href="19-2-2/css/mobiscroll.custom-2.17.0.min.css" rel="stylesheet" 
type="text/css"> 


<script src="19-2-2/js/mobiscroll.custom-2.16.0.min.js"></script> 
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滚屏 选择 日 期 和 时 间 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 19 章 \19-2-2.html ”视频 : 光盘 \ 视 频 \ 第 19 章 \19-2-2.mp4 


[GE 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 19 章 \19-2-2.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
EE 玫 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header"> 
<h1> 滚屏 选择 日 期 和 时 间 </h1> 
</div> 
<div data-role="content"> 
<p> 选择 日 期 : </p> 
<input type="text" id="datel"” placeholder=" 请 选择 日 期 "> 
<p> 选择 时 间 : </p> 
<input type="text" id="timel" placeholder=" 请 选择 时 间 "> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 


在 页 面 中 创建 了 两 个 文本 域 表单 元 素 ， 一 个 用 于 选择 日 期 ， 一 个 用 于 选择 时 间 。 在 两 个 文本 域 的 
<input> 标签 中 分 别 设置 了 不 同 的 id 名 称 ， 后 面 将 通过 JavaScript 脚本 代码 将 不 同 id 名 称 的 元 素 与 
Mobiscroll 插件 绑 定 ， 从 而 实现 弹出 不 同 的 日 期 和 时 间 选 择 窗口 。 

葬 畏 在 <head> 与 </head> 标签 之 间 添 加 代码 ， 引 用 Mobiscroll 插件 的 相关 CSS 样式 表 文件 
和 javaScript 文件 ， 并 编写 相应 的 JavaScript 脚本 代码 。 


<link href="19-2-2/css/mobiscroll.custom-2.17.0.min.css" rel="stylesheet" 
type="text/css"> 
<script src="19-2-2/js/mobiscroll.custom-2.16.0.min.js"></script> 
<script type="text/javascript"> 
$(function () { 
$('#datel') .mobiscroll() .calendar ({ 
theme: 'mobiscroll'，// 设置 主题 风格 
lang: 'en', // 设置 语言 
display: 'bottom' // 设置 显示 位 置 
DD); 
$('#timel') .mobiscroll () .time ({ 
theme: 'mobiscroll', 
display: 'bottom', 
timeFormat: 'HH:ii', 
timeWheels: 'HHii"', 
headerText: false 
Ds; 
</script> 
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编写 的 JavaScript 脚本 代码 分 别 用 于 将 页 面 中 相应 的 id 名 称 元 素 与 Mobiscroll 插件 绑 定 ， 并 
向 插件 传递 相应 的 设置 参数 和 选项 。 
区 整个 jQuery Mobile 页 面 的 代码 如 下 。 





<p> 选择 日 期 : </p> 
<input type="text" id="datel" placeholder=" 请 选择 日 期 "> 
<p> 选择 时 间 : </p> 
<input type="text" id="timel" placeholder=" 请 选择 时 间 "> 
</div> 
<div data-role="footer"><h4> 页 脚 </h4></div> 
</div> 
</body> 
</html> 


EE ”保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 页 面 效果 如 图 19-20 所 示 。 单 击 选择 
日 期 文本 域 ， 在 界面 下 方 显示 日 期 选择 窗口 ， 如 图 19-21 所 示 。 单 击 选择 时 间 文 本 域 ， 在 界面 下 方 
显示 时 间 选 择 窗口 ， 如 图 19-22 所 示 。 





滚屏 选择 日 期 和 时 间 《 October 2015 
迁 择 日 期 1 2 3 
请 选择 日 其 : 酌 
选择 时 间 i a 
请 选择 时 间 15 21 
16 22 
页 肢 CANCEL E NCE T 
图 19-20 图 19-21 图 19-22 
在 弹出 的 日 期 或 时 间 选 择 窗口 中 ， 可 以 使 用 鼠标 在 日 期 或 时 间 选 择 区 域 拖 动 ， 
模拟 移动 设备 滑动 滚屏 的 效果 。 





图 片 交互 效果 的 好 坏 直接 影响 所 开发 的 jQuery Mobile 应 用 的 用 户 体验 ， 本 节 将 向 读者 介绍 两 
款 用 于 实现 图 片 浏览 效果 的 jQuery Mobiel 插件 ， 分 别 是 Camera 插件 和 Swipebox 插件 。 其 中 
Camera 插件 可 以 在 jQuery Mobile 页 面 中 实现 焦点 轮换 图 片 的 效果 ，Swipebox 插件 可 以 实现 单 
击 缩 览 图 预览 大 图 的 效果 。 


Camera 插件 是 一 个 基于 jQuery 插件 的 开源 项 目 ， 功 能 是 对 所 指定 的 图 片 集 实现 轮 播 的 效果 。 
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在 轮 播 过 程 中 ， 用 户 可 以 查看 每 一 张 图 片 的 主题 信息 ， 手 动 中 止 轮 播 过 程 ， 通 过 单 击 查看 每 一 张 被 播 
放 的 图 片 。 此 外 ， 轮 播 的 图 片 还 支持 缩 略图 单 击 预览 方式 ， 方 便 用 户 以 缩 略 图 的 方式 浏览 多 张 图 片 。 
Camera 插件 的 官方 下 载 地址 如 下 。 


https://github.com/pixedelic/Camera 


在 使 用 该 插件 之 前 ， 需 要 在 页 面 的 <head> 与 </head> 标签 之 间 链 接 相 应 的 CSS 样式 表 和 
JavaScript 脚本 文件 。 


<link href="19-3-1/css/camera.css" rel="stylesheet" type="text/css"> 
<script src="19-3-1/js/jquery.easing.1.3.js"></script> 


<script src="19-3-1/js/camera.min.js"></script> 


实现 焦点 轮换 图 片 效果 
最 终 文件 : 光盘 \ 最 终 文 件 \ 第 19 章 \19-3-1.html 。 视频: 光盘 \ 视 频 \ 第 19 章 \19-3-1.mp4 


[GE 新 建 HTML 5 页面， 将 其 保存 为 “光盘 \ 源 文件 \ 第 19 章 \19-3-1.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
葬 畏 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 
<div data-role="header" data-theme="b"> 
<hl> 摄影 图 片 欣 赏 </h1> 
</div> 
<div data-role="content"> 
<div class="camera wrap camera azure skin" id="camera wrap 1"> 
<div data-thumb="19-3-1/images/thumbs/193101.jpg" data-src="19-3-1/imag-— 
es/193101.jpg"> 
<div class="camera caption fadeFromBottom"> 
宁静 如 水 的 湖面 
</div> 
</div> 
<div data-thumb="19-3-1/images/thumbs/193102.jpg" data-src="19-3-1/imag- 
es/193102.jpg"> 
<div class="camera caption fadeFromBottom"> 
故宫 的 傍晚 
</div> 
</div> 
<div data-thumb="19-3-1/images/thumbs/193103.jpg" data-src="19-3-1/imag- 
es/193103.jpg"> 
<div class="camera caption fadeFromBottom"> 
希望 的 田野 


</div> 
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在 内 容 区 域 中 添加 一 个 <div> 标签 作为 放置 轮 播 图 片 的 容器 ， 并 在 该 <div> 标签 中 设置 id 名 称 
为 camera_wrap_1， 类 样式 名 称 为 camera_wrap。 在 该 容器 中 ， 同 时 使 用 <div> 标签 添加 被 轮 


播 的 图 片 ， 每 一 个 轮 播 图 片 的 代码 结构 都 是 相同 的 。 
国 蜀 在 <head> 与 </head> 标签 之 间 添加 代码 ， 引 用 Camera 插件 的 相关 CSS 样式 表 文件 和 
javaScript 文件 ， 并 编写 相应 的 JavaScript 脚本 代码 。 


在 页 面 中 ， 播 放 图 片 的 容器 和 被 轮 播 的 全 部 图 片 元 素 添加 完成 后 ， 还 必须 在 页 面 的 初始 化 事件 中 
调用 Camera 插件 的 camera() 方法 ， 才 能 实现 在 执行 该 页 面 时 图 片 容器 中 的 各 处 图 片 以 幻灯 片 形 
式 轮 播 的 效果 。 

在 调用 插件 的 cameral() 方法 时 ， 括 号 中 也 可 以 添加 一 个 options 对 象 ， 通 过 设置 该 对 象 ， 可 以 
控制 轮 播 图 片 的 效果 与 特征 。 

IE 整个 jQuery Mobile 页 面 的 代码 如 下 。 
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</div> 
<div data-thumb="19-3-1/images/thumbs/193103.jpg" data-src="19-3-1/imag- 
es/193103.jpg"> 
<div class="camera caption fadeFromBottom"> 
希望 的 田野 
</div> 
</div> 
<div data-thumb="19-3-1/images/thumbs/193104.jpg" data-src="19-3-1/imag— 
es/193104.jpg"> 
<div class="camera caption fadeFromBottom"> 
宁静 的 晚霞 
</div> 
</div> 
<div data-thumb="19-3-1/images/thumbs/193105.jpg" data-src="19-3-1/imag- 
es/193105.jpg"> 
<div class="camera caption fadeFromBottom"> 
大 山 深 处 的 落日 
</div> 
</div> 
</div> 
</div> 
"><h4> 页 脚 </h4></div> 





<div data-role="footer" data-theme 
</div> 
</body> 
</html> 


[国保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 使 用 Camera 插件 实现 的 焦点 
轮换 图 片 的 效果 ， 如 图 19-23 所 示 。 还 可 以 以 缩 略 图 的 方式 预览 轮换 图 片 ， 如 图 19-24 所 示 。 
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虽然 在 轮 播 图 片 的 容器 中 使 用 上 述 格式 可 以 添加 多 张 图 片 ， 但 在 移动 设备 上 浏 
览 时 ， 建 议 添加 3~5 张 图 片 是 比较 适宜 的 。 


Swipebox 是 一 款 精美 的 jQuery 灯箱 特效 插件 ， 可 用 于 桌面 、 移 动 和 平板 设备 。 在 移动 设备 上 ， 
支持 滑动 手势 导航 ， 而 在 桌面 上 则 可 以 使 用 键盘 导航 。 不 支持 CSS 3 过 渡 效 果 的 浏览 器 可 以 使 用 
jQuery 降级 处 理 。 

当 用 户 单 击 目标 图 片 时 ， 图 片 会 以 全 尺寸 的 方式 显示 。 此 外 ， 用 户 还 可 以 对 同 组 中 的 图 片 左 右 切 
换 来 进行 查看 ， 非 常 适合 做 照片 画廊 以 及 查看 大 尺寸 图 片 。 

Swipebox 插件 的 官方 下 载 地 址 如 下 。 





http://brutaldesign.github.io/swipebox/ 


在 使 用 该 插件 之 前 ， 需 要 在 页 面 的 <head> 与 </head> 标签 之 间 链 接 相应 的 CSS 样式 表 和 
JavaScript 脚本 文件 。 


<link rel="stylesheet" href="19-3-2/css/swipebox.css"> 
<script src="19-3-2/js/jquery-2.1.0.min.js"></script> 
<script src="19-3-2/js/jquery.swipebox.js"></script> 


实现 单 击 查看 大 图 效果 
最 终 文 件 : 光盘 \ 最 终 文 件 \ 第 19 章 \19-3-2.html 。 视频 : 光盘 \ 视 频 \ 第 19 章 \19-3-2.mp4 


ONES 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 19 章 \19-3-2.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
[王国 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div id="pagel" data-role="page"> 

<div data-role="header" data-theme="b"> 

<h1> 作品 列表 </h1> 

</div> 

<div data-role="content"> 

<a href="19-3-2/images/193201.jpg" class="swipebox" title=" 零食 广告 设计 "> 
<img src="19-3-2/images/small/193201.jpg" alt="image"> 

</a> 

<ahref="19-3-2/images/193202.jpg" class="swipeboxl" title=" 酒 类 广告 设计 "> 
<img src="19-3-2/images/small/193202.jpg" alt="image"> 

</a> 

<ahref="19-3-2/images/193203.jpg" class="swipebox2" title=" 商 超 促销 海报 设计 "> 
<img src="19-3-2/images/small/193203.jpg" alt="image"> 
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在 页 面 的 内 容 区 域 中 插入 各 图 片 的 缩 览 图 ， 为 各 缩 览 图 添加 超 链 接 标 签 <a>， 设 置 超 链接 的 
href 属性 为 该 缩 览 图 的 原始 大 图 ， 并 且 在 超 链接 标签 中 设置 class 属性 ， 用 于 与 Swipebox 插件 相 
绑 定 。 

辐 畏 ”在 <head> 与 </head> 标签 之 间 添加 代码 ， 引 用 Swipebox 插件 的 相关 CSS 样式 表 文 件 
和 javaScript 文件 ， 并 编写 相应 的 JavaScript 脚本 代码 。 


此 处 所 添加 的 JavaScript 脚本 代码 用 于 为 页 面 中 相应 名 称 的 类 属性 元 素 调 用 Swipebox 插件 的 
swipebox() 方法 。 
”整个 jQuery Mobile 页 面 的 代码 如 下 。 








</div> 

<div data-role="footer" data-theme="b"><h4> 页 脚 </h4></div> 
</div> 
</body> 
</html> 


西 思 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 显示 效果 ， 如 图 19-25 
所 示 。 在 页 面 中 单 击 缩 览 图 即 可 显示 该 缩 览 图 的 大 图 效果 ， 如 图 19-26 所 示 。 








SINK YOUR FANGS 
NTO GREAT TASTE 





图 19-25 图 19-26 





本 章 分 类 介绍 了 6 款 专门 针对 jQuery Mobile 移动 应 用 开发 的 插件 ， 通 过 相应 的 实例 制作 ， 详 
细 介 绍 了 这 些 插件 在 jQuery Mobile 应 用 中 的 使 用 方法 和 注意 事项 。 通 过 本 章 内 容 的 学 习 ， 读 者 需要 


了 解 jQuery Mobile 插件 的 作用 ， 并 能 够 在 jQuery Mobile 应 用 开发 过 程 中 运用 适当 的 插件 ， 提 高 
工作 效率 。 


465©@ 


第 20 章 移动 应 用 开发 实战 本 国人 


作用 
通过 前 面 内 容 的 学 习 ， 读 者 已 经 对 jQuery Mobile 的 相关 掌握 使 用 ActionSheet 插件 
知识 有 所 了 解 。 在 使 用 jQuery Mobile 开发 移动 应 用 的 过 程 中 ， 实现 弹出 窗口 的 方法 
需要 能 够 熟练 地 综合 应 用 HTML 5 和 CSS 样式 的 知识 ， 再 结 掌握 使 用 mmenu 插件 实现 
合 jQuery Mobile 的 知识 ， 这 样 才 能 够 更 好 地 制作 出 各 种 移动 侧 边 菜单 效果 
应 用 界面 。 在 本 章 中 将 通过 3 个 移动 应 用 中 常见 的 案例 效果 ， 


向 读者 介绍 如 何 综合 运用 HTML 5、CSS 3 和 jQuery Mobile Y 掌握 使 用 DateBox 插件 实 


开发 和 制作 移动 应 用 界面 。 现 日 期 和 时 间 选 择 窗口 











APP 软件 启动 时 ， 在 正式 进入 APP 软件 界面 之 前 ， 首 先 会 通过 几 个 引导 面向 用 户 介绍 该 款 
APP 软件 的 主要 功能 与 特色 ， 第 一 印象 的 好 坏 会 极 大 地 影响 到 后 续 的 产品 使 用 体验 。 

















根据 APP 引导 页 的 目的 、 出 发 点 不 同 ， 可 以 将 其 分 为 功能 介绍 类 、 使 用 说 明 类 、 推 广 类 、 问 题 
解决 类 ， 一 般 引导 页 不 会 超过 5 个 页 面 。 
本 案例 所 制作 的 APP 引导 主要 是 通过 添加 相应 的 JavaScript 脚本 代码 ， 使 用 户 可 以 通过 滑动 
lf 幕 的 方式 在 多 个 引导 页 之 间 进 行 切 换 ， 在 最 后 一 个 引导 页 中 添加 超 链 接 按钮 ， 通 过 单 击 该 超 链接 按 
钮 可 以 进入 到 该 APP 应 用 的 首页 中 ， 这 也 是 移动 应 用 中 常见 的 效果 。 本 案例 所 制作 的 移动 APP 引 
导 页 最 终 效果 如 图 20-1 所 示 。 




































































在 本 案例 的 制作 过 程 中 ， 每 个 引导 页 面 都 是 一 个 不 同 的 图 片 ， 通 过 创建 jQuery Mobile 页 面 ， 
在 页 面 的 内 容 区 域 中 顺序 插入 4 张 不 同 的 图 片 ， 通 过 CSS 样式 控制 4 张 图 片 的 显示 效果 ， 最 后 
通过 添加 相应 的 JavaScript 脚本 代码 来 实现 在 各 APP 引导 页 之 间 的 滑动 效果 。 


移动 APP 引导 页 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 20 章 \20-1.html 。 视频 : 光盘 \ 视 频 \ 第 20 章 \20-1.mp4 
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图 20-1 











[CE 新 建 HTML 5 页 




















， 将 其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-1.html”。 在 <head> 与 





</head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代码 ,与 前 面 的 案例 相同 。 


国 BB 在 <body> 与 </body> 标签 之 间 编写 jQuery Mobile 页 面 代码 。 


<div data-role="page" id="pagel"> 
<div data-role="content" style="margin:0px; padding:0px;"> 
<!-- 引导 页 图 片 开始 --> 
<div id="wrapper"> 


<div id="scroller"> 





<div><img src="20-1/images/20101.jpg" alt=""></div> 
<div><img src="20-1/images/20102.jpg" alt=""></div> 


<div><img src="20-1/images/20103.jpg" alt=""></div> 


<div><img src="20-1/images/20104.jpg" alt=""><a href="index.html" 


rel="external" id="goto"> 马上 体验 </a></div> 
</div> 
</div> 
<!-- 引导 页 图 片 结束 --> 
<!-- 翻 页 小 圆 点 开始 --> 
<div id="nav"> 
<ul id="indicator"> 
<li class="active">1</1i> 
<1i>2</1i> 
<1i>3</1i> 
<1i>4</1i> 
</ul> 
</div> 
<!-- 翻 页 小 圆 点 结束 --> 
</div> 


</div> 
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在 该 jQuery Mobile 页 面 中 并 没有 设置 页 头 和 页 属 ， 只 是 创建 一 个 jQuery Mobile 页 面 框架 ， 
在 该 页 面 框架 中 创建 一 个 内 容 区 域 ， 并 将 页 面 中 所 有 内 容 的 代码 都 放置 在 jQuery Mobile 页 面 内 容 区 
域 中 。 并 且 在 content 容器 的 <div> 标签 中 添加 了 内 联 CSS 样式 的 设置 ， 将 该 容器 的 边 距 和 填充 均 
设置 为 0， 这 样 可 以 使 容器 中 的 内 容 与 容器 边缘 更 紧密 地 贴 合 在 一 起 。 该 jQuery Mobile 页 面 的 基本 
框架 代码 如 下 。 


<div data-role="page" id="pagel"> 
<div data-role="content" style="margin:0px; padding:0px;"> 
</div> 


</div> 


在 content 容器 中 主要 分 为 两 部 分 ， 一 部 分 是 引导 页 图 片 ， 每 个 图 片 都 单独 放置 在 一 个 <div> 
标签 中 。 另 一 部 分 是 用 于 实现 翻 页 小 圆 点 的 图 标 ， 在 这 里 使 用 项 目 列表 标签 来 实现 。 在 本 实例 中 共有 
4 张 引导 图 片 ， 对 应 4 个 小 圆 点 图 标 ， 所 以 在 项 目 列表 中 编写 了 4 个 <li> 标签 。 

在 最 后 一 张 引 导 图 片 之 后 添加 了 超 链 接 标 签 ， 用 于 链接 到 该 APP 应 用 的 首页 面 ， 代 码 如 下 。 





<div><img src="20-1/images/20104.jpg" alt=""><a href="index.htm1l" 
rel="external" id="goto"> 马上 体验 </a></div> 


在 该 超 链 接 <a> 标签 中 通过 设置 rel="external" 属性 ， 禁 用 该 超 链接 的 Ajax。 设 置 id 名 称 是 为 
了 方便 使 用 CSS 样式 控制 该 超 链 接 的 外 观 和 位 置 。 
国 5” 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 默认 效果 ， 如 图 20-2 所 
示 。 接 下 来 需要 通过 CSS 样式 对 页 面 中 元 素 的 显示 效果 进行 控制 。 新 建 外 部 CSS 样式 表 文 件 ， 将 
其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-1\style\20-1.css”。 在 20-1.html 页 面 中 链接 刚 创建 的 外 
部 CSS 样式 表 文 件 ， 如 图 20-3 所 示 。 





<head> 

<meta charset="utf-8"> 

<title>APP 引 导 页 </title> 

<meta name="viewport" content="width=device-width,initial-scale=1"> 
<Link rel="stylesheet" href= 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src= 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
</script> 

<Link rel="stylesheet" href="26-1/styLe/26-1.css"> 

二 ”J 











图 20-2 图 20-3 


在 预览 页 面 中 可 以 看 出 ， 因 为 并 没有 对 网 页 元 素 的 外 观 样式 进行 设置 ， 元 素 在 
浏览 器 中 表现 为 默认 的 效果 ， 所 有 引导 图 片 以 原始 大 小 顺序 排列 显示 。 
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在 外 部 CSS 样式 表 文 件 中 创建 相应 的 CSS 样式 ， 对 jQuery Mobile 页 面 中 内 容 区 域 的 元 


素 进行 控制 ， 如 图 20-4 所 示 。 








*{ #scroller div img { mt a 
norgine ops Width: 00%; Bet 
padding: Opx; height: auto; height: auto; 

} 小 bottom: 15px; 

#goto { left: 56%; 

#urapper { . _ position: absolute; margin-left: -28px; 
er display: block; z-index: 1663 
width: i s 。 

a width: 350px; #indicator, #1indicator 11 { 
eight: auto; height: 46px; display: block; 
overflow: hidden; bottom: 30px; float: left; 
z-index: 1; left: 56%; } 

} margin-left: -75px; #indicator li { 

Uma= hada A width: 0.7em; 

#scroller { width: 466%;} e-height: 46px; height: ©.7em; 

#scroller div { text-align: center; background-color: #ddd; 
position: relative; os a border-radius: ©.5em; 
ei el z-index: 160; margin-right: 0.2em; 
fl cs 人 ft。 和 text-shadow: none; ee ee 

gerd background-color: rgba(255,255,255,0.4);|) overfiow: Widden; 
width: 25%; border: solid lpx #FFF; 
nedahts ae sindicator li.active { 

eight: auto; border-radius: 2px; background-color: #888; 

= } 











图 20-4 


国葬” 保存 页 面 ,在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 使 用 CSS 样式 对 页 面 元 素 
进行 控制 的 效果 ， 如 图 20-5 所 示 ， 但 目前 只 能 够 看 到 第 一 张 引 导 图 片 。 接 下 来 就 需要 通过 添加 
JavaScript 脚本 代码 实现 导航 页 的 切换 效果 。 在 页 面 头 部 的 <head> 与 </head> 标签 之 间 添 加 代码 ， 
链接 两 个 外 部 的 JavaScript 文件 ， 如 图 20-6 所 示 。 





<head> 

<meta charset="utf-8"> 

<title>APP 引 导 页 </title> 

<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href= 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src= 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
</script> 






"stylesheet" href="20-1/style/20-1.css"> 
1/js/iscroll.js"></script> 
js/global.js"></script> 











</head> 








图 20-6 


国 5” 接 下 来 需要 添加 JavaScript 代码 ， 在 <head> 与 </head> 标签 之 间 添 加 相应 的 JavaScript 
脚本 代码 。 


<script type="text/javascript"> 
document .onreadystatechange = subSomething; // 当 页 面 加 载 状态 改变 的 时 候 执行 
function subSomething(){ 

Var setime; 


if (navigator.onLine){ 
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第 一 段 JavaScript 脚本 代码 用 于 判断 页 面 的 加 载 状态 改变 时 所 执行 的 操作 ， 并 设置 引导 图 片 切 
换 的 动画 过 渡 时 间 。 第 二 段 JavaScript 脚本 用 于 判断 当前 窗口 的 高 度 ， 通 过 当前 窗口 高 度 来 调整 引 
导 图 片 所 在 元 素 的 高 度 ， 使 得 容器 在 窗口 中 始终 是 满 屏 显示 。 
IE 该 jQuery Mobile 页 面 的 完整 代码 如 下 。 








<div data-role="content" style="margin:0px; padding:0px;"> 
<!-- 引导 页 图 片 开始 --> 
<div id="wrapper"> 
<div id="scroller"> 
<div><img src="20-1/images/20101.jpg" alt=""></div> 
<div><img src="20-1/images/20102.jpg" alt=""></div> 
<div><img src="20-1/images/20103.jpg" alt=""></div> 
<div><img src="20-1/images/20104.jpg" alt=""><a href="index.html" 
rel="external" id="goto"> 马上 体验 </a></div> 
</div> 
</div> 
<!-- 引导 页 图 片 结束 --> 
<!-- 翻 页 小 圆 点 开始 --> 
<div id="nav"> 
<ul id="indicator"> 
<li class="active">1</1i> 
<1i>2</1i> 
<1i>3</1i> 
<1i>3</1i> 
</ul> 
</div> 
<!-- 翻 页 小 圆 点 结束 --> 
</div> 
</div> 
</body> 
</html> 


卫 5 ”保存 页 面 , 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 所 制作 的 APP 引导 页 面 效果 ， 
可 以 在 屏幕 上 滑动 查看 不 同 的 引导 图 片 ， 如 图 20-7 所 示 。 





移动 应 用 与 网 站 相似 ， 由 多 个 不 同 功能 的 页 面 构成 ， 其 中 最 重要 的 就 是 移动 应 用 的 首页 面 ， 在 该 
页 面 中 通常 会 安排 导航 元 素 ， 使 用 户 能 够 快速 进入 自己 感 兴趣 的 内 容 中 ， 并 且 为 了 方便 用 户 的 操作 ， 
需要 能 够 实现 流畅 的 操作 体验 。 


本 案例 所 设计 的 移动 应 用 首页 非常 简洁 ， 主 要 由 两 个 部 分 构成 ， 一 个 是 可 滑动 切换 的 页 面 背景 图 
片 ， 另 一 个 是 同样 提供 滑动 切换 功能 的 底部 导航 栏 。 

在 移动 设备 中 运行 的 移动 应 用 程序 通常 都 是 通过 人 手 进行 操作 ， 最 常见 的 操作 就 是 单 击 和 滑动 ， 
这 一 点 与 在 传统 桌面 浏览 器 中 查看 网 页 有 很 大 的 不 同 。 本 案例 通过 jQuery Mobile 与 JavaScript 相 
结合 ， 实 现在 移动 应 用 首页 面 中 页 面 背景 图 片 与 页 面 的 导航 栏 分 别 可 以 进行 滑动 操作 ， 并 且 相 互 不 受 
干扰 ， 能 够 带 给 用 户 良好 的 体验 。 本 案例 所 制作 的 移动 应 用 首页 最 终 效果 如 图 20-8 所 示 。 


| [人 





背景 图 片 轮换 效果 与 上 一 节 中 讲解 的 APP 引导 页 使 用 了 不 同 的 制作 方法 ， 在 页 面 中 使 用 项 
目 列表 的 方式 来 放置 各 背景 图 片 ， 通 过 CSS 样式 来 控制 背景 图 片 的 显示 效果 ， 最 后 添加 相应 的 
JavaScript 脚本 代码 实现 背景 图 片 的 滑动 轮换 效果 。 


制作 背景 图 轮换 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 20 章 \20-2.html 视频: 光盘 \ 视 频 \ 第 20 章 \20-2-2.mp4 


[ES 新 建 HTML 5 页面， 将 其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-2.html”。 在 <head> 与 
</head> 标签 之 间 添 加 <meta> 标签 , 设置 和 加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 的 案例 相同 。 
葬 思 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 
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<div data-role="page" id="pagel"> 
<div data-role="content" style="margin:0px; padding:0px;"> 
<div id="container"> 
<!-- 背景 展示 图 开始 --> 
<div class="panels slider"> 
<ul class="slides"> 
<1i><img src="20-2/images/20201.jpg" alt="" /></1i> 
<1i><img src="20-2/images/20202.jpg" alt="" /></1i> 
<1i><img src="20-2/images/20203.jpg" alt="" /></1i> 
</ul> 
</div> 
<!-- 背景 展示 图 结束 --> 
</div> 
</div> 


</div> 


在 该 jQuery Mobile 页 面 中 没有 设置 页 头 和 页 尾 ， 只 是 创建 一 个 jQuery Mobile 页 面 框架 ,在 
该 页 面 框架 中 创建 一 个 内 容 区 域 。 在 内 容 区 域 中 通过 项 目 列表 放置 背景 展示 图 片 。 
[GE 接 下 来 需要 通过 CSS 样式 对 页 面 中 元 素 的 显示 效果 进行 控制 。 新 建 外 部 CSS 样式 表 文 件 ， 
将 其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-2\style\20-2.css”。 在 20-2.html 页 面 中 链接 刚 创 建 的 
外 部 CSS 样式 表 文 件 ， 如 图 20-9 所 示 。 


<head> 

<meta charset="utf-8"> 

<title>APP 应 用 首页 面 </title> 

<meta name="viewport" content="width=device-width,initial-scale=1"> 

<Link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

<link rel="stylesheet" href="20-2/style/20-2.css"> 
[Re 














图 20-9 


在 外 部 CSS 样式 表 文 件 中 创建 相应 的 CSS 样式 ， 对 jQuery Mobile 页 面 中 内 容 区 域 的 元 
素 进行 控制 ， 如 图 20-10 所 示 。 























*{ .panels_slider { 
margin: 9px; width: 196%; 
padding: ©px; height:106%; 
} margin: 6; 
html,body { padding: 9; 
height:166%; 机 
} .panels_slider .slides Li { 
#container { display: none; 
position:relative; 二 
width:640px; .panels_slider .slides img { 
height:166%; max-width: 196%; 
margin:auto; display: block; 
} } 
图 20-10 
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a 在 名 为 .panels_slider .slides ji 的 CSS 样式 中 设置 display 属性 为 none, 将 
页 面 中 的 项 目 列表 元 素 设置 为 无 ， 默 认 在 页 面 中 不 可 见 。 后 面 将 通过 JavaScript 肢 
本 代码 来 加 载 项 目 列表 ， 从 而 避免 项 目 列表 中 图 像 出 现 跳跃 的 现象 。 
号 畏 ” 在 页 面 头 部 的 <head> 与 </head> 标签 之 间 添 加 代码 ， 链 接 相应 的 JavaScript 文件 和 
CSS 样式 表 文件 ， 并 编写 相应 的 JavaScript 脚本 代码 ， 从 而 实现 背景 图 片 的 轮换 效果 。 


<script src="20-2/js/jquery.flexslider.js"></script> 
<link rel="stylesheet" href="20-2/style/flexslider.css"> 
<script type="text/javascript"> 
var $=jQuery.noCconflict (); 
$ (window) .load (function() { 
$('.panels slider').flexslider({ 
animation: "slide", 
directionNav: false, 
controlNav: true, 
animationLoop: false, 
slideToStart: 1, 
animationDuration: 300, 
slideshow: false 
1); 
]) 7 
</script> 


所 添加 的 JavaScript 脚本 代码 ， 分 别 链接 用 于 实现 图 像 滑动 轮换 的 JavaScript 文件 和 其 相应 的 
CSS 样式 表 文 件 。 编 写 在 页 面 中 的 JavaScript 脚本 代码 ， 是 将 页 面 中 应 用 了 名 为 panels_slider 类 
CSS 样式 的 元 素 与 flexslider() 方法 绑 定 ， 从 而 实现 该 元 素 中 内 容 的 滑动 切换 ， 并 对 相关 属性 进行 设置 。 
国 5” 保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 在 屏幕 上 滑动 查看 不 同 的 背景 图 片 ， 
如 图 20-11 所 示 。 








45© 





在 页 面 底部 放置 导航 菜单 ， 每 个 导航 菜单 项 都 采用 图 标 与 文字 相 结合 的 方式 ， 便 于 用 户 的 理解 和 
操作 。 导 航 菜单 分 为 两 大 部 分 ， 分 别 放置 在 <li> 标签 中 ， 这 样 可 以 通过 与 背景 图 片 滑动 切换 相同 的 方 
式 来 实现 导航 菜单 的 滑动 切换 效果 。 


制作 可 滑动 的 底部 导航 栏 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 20 章 \20-2.html 。 视频 : 光盘 \ 视 频 \ 第 20 章 \20-2-3.mp4 


[GE 接 下 来 继续 制作 底部 导航 栏 效 果 ， 在 页 面 内 容 区 域 中 编写 底部 导航 栏 部 分 代码 。 
<!-- 底部 导航 开始 --> 


<div id="bottom nav"> 
<div class="icons nav"> 
<ul class="slides"> 
<1i> 
<a href="#" class="icon"><img src="20-2/images/about .png" alt="" /><span> 
关于 我 们 </ span></a> 
<a href="#" class="icon"><img src="20-2/images/services.png" alt="" 
/><span> 服务 </span></a> 
<a href="#" class="icon"><img src="20-2/images/blog.png" alt="" /><span> 博 
客 </span></a> 
<a href="#" class="icon"><img src="20-2/images/portfolio.png" alt="" 
/><span> 作 品 </span></a> 
</1i> 
<1i> 
<a href="#" class="icon"><img src="20-2/images/photos.png" alt="" /><span> 
图 片 </span></a> 
<a href="#" class="icon"><img src="20-2/images/video.png" alt="" /><span> 
视频 </span></a> 
<ahref="#" class="icon"><img src="20-2/images/clients.png"alt="" /><span> 
团队 </span></a> 
<a href="#" class="icon"><img src="20-2/images/contact .png" alt="" /><span> 
联系 我 们 </span></a> 
二 /了 > 
</ul> 
</div> 
</div> 


<!-- 底部 导航 结束 --> 


在 该 部 分 页 面 代码 中 ， 使 用 项 目 列表 来 安排 各 导航 菜单 项 ， 将 导航 菜单 项 分 为 两 部 分 ， 每 个 导 
菜单 项 都 由 一 张 图 片 和 菜单 文字 组 成 ， 并 且 为 各 导航 菜单 元 素 应 用 了 相应 的 类 CSS 样式 ， 接 下 来 就 
需要 通过 CSS 样式 对 各 导航 菜单 项 的 表现 效果 进行 控制 。 
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E 权 玫 ”转换 到 所 链接 的 外 部 CSS 样式 表 文 件 20-2.css 中 ， 创 建 相应 的 CSS 样式 ， 对 jQuery 
Mobile 页 面 中 底部 导航 菜单 元 素 进 行 控制 ， 如 图 20-12 所 示 。 

















#bottom_nav { 
position: absolute; 
width: 646px; 
height: auto; 
bottom: Opx; 
left: epx; 
background-image: url(../images/nav_bg.png); 
background-repeat: repeat-x; 
} @media screen and (max-width: 649px) { 
We Movert 
width: 160%; width:166%; 
height: auto; height:160%; 
top: -208px; 
left: epx; #bottom_nav{ width:166%;} 
z-index: 888; .icons_nav .slides 11 af 
i nav .slides 11 af hair 
以 ed Wor margin:0 9 © 4.8%; 
margin: © © © 5%; padding:5% © © @; 
padding: 5% © © 9; font-size: 12px; 
font-size: 15px; Color:#FFFFFF; 
cotor: #FFF; text-align:center; 
ee pe Line-height:26px; 
ne-height: 35px; 本 
text-shadow: none; WI 
width: 19.2%; 上 
} ) 
图 20-12 


此 处 通过 CSS 3 新 增 的 @media 规则 ， 定 义 了 当 屏 幕 的 最 大 宽度 小 于 640 像 
素 时 部 分 CSS 样式 的 代码 。 这 样 做 的 目的 是 为 了 当 屏 幕 宽 度 小 于 640 像素 时 ， 页 
面 中 的 各 元 素 不 会 挤 在 一 起 而 影响 页 面 的 查看 效果 。 





辐 王 ”在 页 面 头 部 的 <head> 与 </head> 标签 之 间 添 加 相应 的 JavaScript 脚本 代码 ， 从 而 实现 底 
部 导航 栏 部 分 的 滑动 切换 效果 。 


$('.icons nav').flexslider({ 
animation: "slide", 
directionNav: false, 
animationLoop: false, 
controlNav: false, 
slideshow: false, 
animationDuration: 300 


Es 


将 页 面 中 应 用 了 名 为 icons_nav 类 CSS 样式 的 元 素 与 flexslider() 方法 绑 定 ， 从 而 实现 该 元 素 
的 滑动 切换 ， 并 对 相关 属性 进行 设置 。 
I@ 玫 完成 该 移动 应 用 首页 的 制作 ， 该 jQuery Mobile 页 面 的 完整 代码 如 下 。 
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[国保 存 页 面 ,在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 不 仅 可 以 在 背景 上 滑动 切换 不 同 的 背景 
还 可 以 在 底部 的 导航 菜单 上 进行 滑动 ， 切 换 不 同 的 导航 菜单 选项 ， 如 图 20-13 所 示 。 





] 





随 着 移动 互联 网 的 不 断 发 展 ， 人 们 上 网 的 习惯 也 在 悄然 发 生变 化 ， 由 原来 的 PC 端 桌面 浏览 器 逐 
步 向 移动 终端 设备 过 渡 ， 而 开发 基于 移动 终端 设备 的 应 用 系统 已 成 为 各 互联 网 企业 的 共识 。 本 节 将 使 
用 jQuery Mobile 框架 ， 开 发 一 个 移动 终端 订餐 APP。 


考虑 到 移动 终端 设备 中 各 浏览 器 的 复杂 特性 以 及 与 PC 端 在 机 器 性 能 、 网 络 环境 的 诸多 差异 ， 在 
使 用 jQuery Mobile 开发 移动 应 用 项 目 时 ， 需 要 注意 移动 设备 的 屏幕 特点 ， 必 须 使 开发 出 来 的 功能 更 
便于 用 户 的 操作 。 

本 案例 所 制作 的 订餐 APP 的 整体 架构 如 图 20-14 所 示 。 


订餐 城市 页 面 国父 厅 列 表 页 面 国 餐厅 介绍 页 面 


图 20-14 


该 订餐 APP 主要 有 5 个 页 面 ， 分 别 是 启动 页 面 、APP 首页 面 、 订 餐 城 市 页 面 、 餐 厅 列 表 页 面 
和 餐厅 介绍 页 面 , 页 面 的 操作 流程 比较 简洁 , 因为 不 涉及 订单 管理 等 功能 , 所 以 其 操作 是 顺序 进行 的 。 

e APP 启动 页 面 (loading.html ) 

在 该 页 面 中 通过 使 用 JavaScript 的 计数 功能 , 在 指定 的 时 间 内 自动 跳 转 到 该 订餐 APP 的 首页 中 。 

e APP 首页 面 (index.html ) 

在 该 页 面 中 通过 jQuery Mobile 列表 组 件 表现 食品 类 型 ， 并 在 列表 中 加 入 图 片 ， 方 便 用 户 选择 。 

e 选择 订餐 城市 页 面 ( select-city.html ) 

用 户 在 APP 首页 面 中 选择 某 种 食品 类 型 后 进入 选择 订餐 城市 页 面 中 ， 在 该 页 面 中 通过 带 内 容 过 
滤 功 能 的 列表 表现 城市 ， 使 用 户 能 够 快速 地 找到 需要 订餐 的 城市 。 

e 餐厅 列表 页 面 ( select-restaurant.html ) 

该 页 面 同 样 使 用 jQuery Mobile 列表 组 件 来 展示 各 餐厅 的 基本 信息 。 
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e 餐厅 介绍 页 面 ( restaurant.html ) 
在 餐厅 列表 页 面 中 单 击 某 个 餐厅 即 可 进入 餐厅 介绍 页 面 ， 在 该 页 面 中 使 用 jQuery Mobile 布局 网 
格 对 餐厅 信息 进行 介绍 。 


通常 在 启动 APP 时 都 会 显示 一 个 启动 页 面 , 该 启动 页 面 可 以 放置 宣传 广告 ,推广 活动 等 信息 内 容 ， 
经 过 一 定时 间 后 自动 跳 转 到 APP 首页 面 中 ， 从 而 起 到 有 效 的 宣传 推广 作用 。 


制作 启动 页 面 
最 终 文 件 : 光盘 \ 最 终 文件 \ 第 20 章 \20-3Woading.html 。 视频 : 光盘 \ 视 频 \ 第 20 章 \20-3-2.mp4 


OI 新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-3\loading.html”。 在 <head> 
与 </head> 标签 之 间 添 加 <meta> 标签 、 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 的 案例 相同 。 
葬 辆 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div data-role="page" id="pagel" class="bg01"> 
<div data-role="content"> 
<div id="load"> 


<img src="images/2302.png" alt="1ogo"><br> 


</div> 
</div> 


</div> 


该 页 面 的 代码 结构 非常 简单 ， 创 建 jQuery Mobile 页 面容 器 ， 在 该 页 面容 器 中 创建 内 容 容 器 ， 
不 需要 页 头 和 页 脚 ， 在 内 容 容 器 中 制作 相应 的 内 容 。 注 意 ， 在 页 面容 器 标签 中 应 用 了 名 为 bg01 的 类 
CSS 样式 ， 该 类 CSS 样式 主要 为 页 面 设置 背景 图 像 效 果 。 
[GE 玫 新 建 外 部 CSS 样式 表 文 件 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-3\style\20-3. 
css”。 在 loading.html 页 面 中 链接 刚 创建 的 外 部 CSS 样式 表 文件 ， 如 图 20-15 所 示 。 在 外 部 
CSS 样式 表 文 件 中 创建 相应 的 CSS 样式 ， 对 页 面 元 素 进行 控制 ， 如 图 20-16 所 示 。 





nargin: Opx; 
padding: Opx; 


boo, 


ly { 

font-fanity; 答 软 雅 时; 
Tont-s1ze: 14px; 
Tne-hetght: 25px 





<head> 
<meta charset="utf-8"> 
<titte> 订 餐 APP 启 动 页 </titte> 
<meta name="viewport” content="width=device-width,initial-scale=1"> ||: 
<Link rel="stylesheet" href= 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src= 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 





</script> 














font-size: 16px; 
<link rel="stylesheet" href="style/280-3.css" /> eho Bh px lpx #333; 
</head> 





图 20-15 图 20-16 
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在 该 创建 的 CSS 样式 中 ， 名 称 为 * 和 body 的 CSS 样式 主要 对 页 面 的 整体 属 
性 进行 设置 。 名 称 为 .bg01 的 类 CSS 样式 设置 了 页 面 的 背景 图 像 。 名 称 为 #0ad 
的 CSS 样式 设置 了 页 面 内 容 区 域 中 id 名 称 为 load 的 Div 的 显示 效果 。 
四 在 页 面 头 部 的 <head> 与 </head> 标签 之 间 添 加 相应 的 JavaScript 脚本 代码 ， 实 现 页 面 一 
定时 间 后 自动 跳 转 。 


<script type="text/javascript"> 

function changepage () { 
window.location.href="index.html"; 

} 

$ (document) .on ("pagecreate", function(){ 
Var id=setInterval ("changepage()",5000); 

}) 

</script> 


为 了 使 页 面 能 在 设 定 的 时 间 内 跳 转 至 首页 ， 先 创建 一 个 自 定义 函数 changepage()， 在 该 函 
数 中 ， 通 过 设置 window 对 象 的 location.href 属性 值 ， 实 现 当前 页 面 的 跳 转 功能 。 然 后 ， 在 本 页 
面 绑 定 的 pagecreate 事件 中 调用 setlnterval() 方法 ， 在 该 方法 中 每 隔 5 秒 自动 执行 自 定义 函数 
changepage()， 从 而 实现 页 面 自 动 跳 转 的 功能 。 

贡 国 完成 该 APP 启动 页 面 的 制作 ， 完 整 的 页 面 代 码 如 下 。 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 订 和 餐 APP 启动 页 </title> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mo-— 
bile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. 
jas"></acript> 
<link rel="stylesheet" href="style/20-3.css" /> 
<script type="text/javascript"> 
function changepage () { 
window.location.href="index.html"; 
} 
$ (document) .on ("pagecreate", function(){ 
Var id=setInterval ("changepage ()",5000); 
1) 


</script> 
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</head> 
<body> 
<div data-role="page" id="pagel" class="bg01"> 
<div data-role="content"> 
<div id="load"> 


<img src="images/2302.png" alt="1ogo"><br> 


</div> 
</div> 
</div> 
</body> 
</html> 


国保 存 页 面 ,在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 该 APP 启动 页 面 的 效果 ， 如 
20-17 所 示 。 当 经 过 设置 的 5 秒 钟 后 ， 会 自动 跳 转 到 所 设置 的 APP 首页 面 index.html 中 ， 因 为 
目前 我 们 还 没有 制作 该 页 面 ， 所 以 会 显示 “无 法 打开 文件 ”， 如 图 20-18 所 示 。 
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图 20-18 





APP 启动 页 面 显示 5 秒 钟 后 自动 跳 转 到 APP 首页 面 ， 在 该 页 面 中 将 通过 项 目 列表 的 方式 来 展 
示 不 同类 型 和 风味 的 食品 ， 单 击 相应 的 食品 类 型 可 以 进入 选择 区 域 的 界面 中 。 


制作 订餐 APP 首页 面 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 20 章 \20-3\index.html 。 视频 : 光盘 \ 视 频 \ 第 20 章 \20-3-3.mp4 


[CE 新 建 HTML 5 页面 ,将 其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-3\index.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
的 案例 相同 。 

EE 国 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 
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<div data-role="page" id="pagel" class="bg02"> 
<div data-role="content"> 
<div id="logo"><img src="images/2302.png" alt="logo"></div> 
<div id="main-list"> 
<hl> 今天 你 想 吃 点 什么 ? </h1> 
<ul data-role="listview" data-inset="true"> 
<1i> < rercs" eectececity tn al= ”externat” datas 
transition="slidedown"><img src="images/2305.jpg"/><h3> 传统 中 餐 </h3></a></1i> 
datas 
transition="slidedown"><img src="images/2306.jpg"/><h3> 意大利 Pizza</h3></a></1i> 
nol datas 
transition="slidedown"><img src="images/2307.jpg"/><h3> 日 式 料理 </h3></a></1i> 
<li><a href="select-city.html" rel="external" data- 
transition="slidedown"><img src="images/2308.jpg"/><h3> 汉堡 </h3></a></1i> 
<Li>c<a hreft= "gelect=elty htmnl relserternal” data= 


transition="slidedown"><img src="images/2309.jpg"/><h3> 蛋糕 西点 </h3></a></1i> 


<li><a href="select-city.html" rel="external" data- 
transition="slidedown"><img src="images/2310.jpg"/><h3> 自助 烧烤 </h3></a></1i> 
</ul> 
</div> 
</div> 
</div> 


创建 jQuery Mobile 页 面容 器 ， 在 该 页 面容 器 中 创建 内 容 容器 ， 不 需要 页 头 和 页 脚 ， 在 内 容 容 器 
中 制作 相应 的 内 容 。 注 意 ， 在 页 面容 器 标签 中 应 用 了 名 为 bg02 的 类 CSS 样式 ， 该 类 CSS 样式 主 
要 为 页 面 设置 背景 图 像 效 果 。 


在 项 目 列 的 <ul> 标签 中 添加 data-role="listview" 属性 设置 ， 将 列表 项 创建 一 
国 个 列表 组 合 ， 添 加 data-inset="true" 属性 设置 ， 以 让 列表 组 合 不 与 屏幕 同 宽 并 添加 
圆 角 的 效果 。 


[本 ”保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 该 APP 首页 默认 的 效果 ， 如 
20-19 所 示 。 接 下 来 需要 通过 CSS 样式 对 页 面 中 相应 的 元 素 进行 设置 ， 在 外 部 CSS 样式 表 文 
件 中 创建 名 为 .bg02 的 类 CSS 样式 和 名 为 #0ogo 的 CSS 样式 ， 控 制 页 面 整 体 背 景 图 像 和 页 面 头 部 
logo 的 位 置 ， 如 图 20-20 所 示 。 

”在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 背景 和 logo 图 像 的 效果 ， 如 图 20-21 
所 示 。 在 外 部 CSS 样式 表 文件 中 创建 名 为 #main-list h1 的 CSS 样式， 对 项 目 列表 上 方 标题 文字 
进行 设置 ， 如 图 20-22 所 示 。 
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图 20-21 








上 





.bge2 { 


background-image: url(../images/2363.jpg); 
background-repeat: no-repeat; 
background-position: center top; 
background-size: cover; 


#logo { 


width: 166%; 

height: 158px; 

margin: Opx auto; 

padding: 16px OQpx; 

text-align: center; 

border-bottom: lpx solid rgba(175,27,27,0.6); 








图 20-20 








#main-list hi{ 


font-size: 24px; 

Color: #FFF; 

font-weight: boeder; 

font-style: italic; 

text-shadow: 2px 2px 3px #333; 

padding: 1l9px © Spx S50px; 
background-image:url(../images/2304.png); 
background-repeat: no-repeat; 
background-position: left -12px; 








图 20-22 


王国 ”在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 项 目 列表 上 方 标题 文字 的 效果 ， 如 图 20-23 
所 示 。 在 外 部 CSS 样式 表 文 件 中 创建 相应 的 CSS 样式 ， 对 项 目 列表 的 效果 进行 设置 ， 如 图 20-24 
所 示 。 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 该 APP 首页 的 效果 ， 如 图 20-25 所 示 。 


ape 


BN 








#main- list h3{ 
padding-top:10px; 
color: #FFF; PECKET 
text-shadow: lpx lpx lpx #660; 
font-weight: normal; 


} 


#main- Uist img{ 
padding: 4px; 


里 


#main-list a { 
background-color: rgba(6,9,9,6.7); 


} 


#main-list a:hover,#main-list a:active { 
background-color: rgba(0,0,0,1); 


外 


1 今天 全 想必 后 开 入 











图 20-24 图 20-25 
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在 首页 面 中 选择 需要 的 食品 类 型 即 可 进入 选择 订餐 城市 页 面 ， 在 该 页 面 中 同样 使 用 项 目 列表 的 形式 
表现 订餐 城市 名 称 ， 不 同 的 是 在 该 页 面 中 加 入 了 列表 过 滤 功 能 ， 可 以 使 用 户 快速 找到 需要 订餐 的 城市 。 


制作 订餐 城市 页 面 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 20 章 \20-3\select-city.html 。 视频 : 光盘 \ 视 频 \ 第 20 章 \20-3-4.mp4 


[GE 新 建 HTML 5 页面， 将 其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-3\select-city.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
的 案例 相同 。 

葬 畏 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div data-role="page" id="pagel" class="bg03"> 
<div data-role="content"> 


<div id="logo"><img src="images/2302.png" alt="logo"></div> 





<div id="city-list"> 
<h1> 你 想 在 哪个 城市 订餐 ? </h1> 
<ul data-role="listview" data-inset="true" data-filter="true"> 

<li>xa href=”"gelect restaurant. htnl” rel="external” datas 
transition="slidedown"> 北 京 <span class="ui-li-count">8</span></a></1i> 

<l1i><a href="select-restaurant .html" rel="external" data- 
transition="slidedown"> 上 海 <span class="ui-li-count">12</span></a></1i> 

lii>xa hretsroeliect = regtauraynt ht le EU daa 
transition="slidedown"> 广州 <span class="ui-li-count">6</span></a></1i> 

<li>x*a hreaf="select=reataurant htni” rel="erternal” datas 
transition="slidedown"> 深圳 <span class="ui-1i-count">7</span></a></1i> 

<Li><a href="select=-restaurant htanal” rel=”"external” data= 
transition="slidedown"> 哈尔滨 <span class="ui-li-count">3</span></a></1i> 

< 二 ><H hretf= Select=restaurantehtut rels" external, data= 
transition="slidedown"> 长 春 <span class="ui-li-count">2</span></a></1i> 

<Tis<a hret=" seletct estaurtantehtnl” red=" eterhal” data= 
transition="slidedown"> 沈阳 <span class="ui-li-count">4</span></a></1i> 

<ii><a bref= select =>restaurant htnal™ rei="externalr datas 
transition="slidedown"> 呼和浩特 <span class="ui-li-count">2</span></a></1i> 

区 让 生 > 三 让 二 elect -xestaurant html rel erxternal” datar 
transition="slidedown"> 太原 <span class="ui-li-count">3</span></a></1i> 

<ii><a hrefa="select=restaurant htnl rei="erternal data 
transition="slidedown"> 石家庄 <span class="ui-li-count">5</span></a></1i> 

ii><a hres= elect=restaurant ltnl, fed=“ external data= 
transition="slidedown"> 西安 <span class="ui-li-count">6</span></a></1i> 

<li>xa href=”"aelect=restauranteshtnl” Fel="external”" datas= 


transition="slidedown"> 银川 <span class="ui-1i-count">1</span></a></1i> 
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<li>x<a href="select-restaurant .html" rel="external™ 
transition="slidedown"> 兰州 <span class="ui-li-count">2</span></a></1i> 
<l1i><a href="select-restaurant.html" rel="external" 
transition="slidedown"> 乌鲁木齐 <span class="ui-1i-count">3</span></a></1i> 
<li><a href="select=restaurant htnl rel="externadi" 
transition="slidedown"> 西宁 <span class="ui-li-count">1</span></a></1i> 
<1i><a BeerE= elect restaurant shtml rey" etternali, 
transition="slidedown"> 拉 萨 <span class="ui-li-count">1</span></a></1i> 
过 下 于 关 六 中 和 二 从 下 二 总 二 于 tT 
transition="slidedown"> 郑州 <span class="ui-li-count">5</span></a></1i> 
<i1142xa hret="aelect restaurant -htnli” rel="externatli” 
transition="slidedown"> 济南 <span class="ui-li-count">3</span></a></1i> 
<Ii><a href="select-restaurant.html™ rel="external" 
transition="slidedown"> 合 肥 <span class="ui-li-count">2</span></a></1i> 
“lls<a hrers=" select=LTestaurantth 人 tml rel= "external, 
transition="slidedown"> 南京 <span class="ui-li-count">6</span></a></1i> 
<li><a href="select-restaurant.html" rel="external™" 
transition="slidedown"> 杭 州 <span class="ui-1i-count">7</span></a></1i> 
<1ii>xa href="select restaurantsehtmni” rel=”externar” 
transition="slidedown"> 武 汉 <span class="ui-li-count">6</span></a></1i> 
<Ti2<a href=" qelect restaurnant shtanl” rels” erternar, 
transition="slidedown"> 重庆 <span class="ui-li-count">8</span></a></1i> 
ii><a Dret=rapliect=restaurant htnl® Trelis ertErna 
transition="slidedown"> 成 都 <span class="ui-li-count">9</span></a></1i> 
人 <a hear=sraelect = Testaurantohtanal” TelererternalY 
transition="slidedown"> 福 州 <span class="ui-1i-count">2</span></a></1i> 
<1i><a href="select-restaurant .htnli” rel="external” 
transition="slidedown"> 南昌 <span class="ui-1i-count">3</span></a></1i> 
<11i><a href=»sselect= restaurante htnaL rel="exrternal” 
transition="slidedown"> 长 沙 <span class="ui-1i-count">5</span></a></1i> 
<1li><a href="select-—restaurantehtml” rel="external” 
transition="slidedown"> 贵阳 <span class="ui-li-count">2</span></a></1i> 
<l114><a href="aselect=restaurant ehtnl" rel="external™ 
transition="slidedown"> 昆明 <span class="ui-li-count">4</span></a></1i> 
< reE="aelect = restaurante htnl" rel =external” 
transition="slidedown"> 南宁 <span class="ui-1i-count">7</span></a></1i> 
之 1 二 有 "select-restaurant htnlY rel="ert 人 ertnad” 
transition="slidedown"> 海口 <span class="ui-1i-count">4</span></a></1i> 
><a res=s SelLect=Tesntaurant htnL reld="external” 
transition="slidedown"> 香港 <span class="ui-li-count">15</span></a></1i> 
Ii><a href= elect=restaurant htnl, Fel="exterhal” 


transition="slidedown"> 澳门 <span class="ui-1li-count">8</span></a></1i> 


Ls 
data-— 
data= 
data- 
data- 
a 
data- 
data- 
data- 
data- 
data- 
data- 
基于 
data- 
如 有 征用 丘 
data- 
Ce 
data= 
可 有 
data- 
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<1i><a href="select-restaurant .html"” rel="external” data=— 
transition="slidedown"> 台北 <span class="ui-li-count">12</span></a></1i> 
</ul> 
</div> 
</div> 


</div> 


创建 jQuery Mobile 页 面容 器 ， 在 该 页 面容 器 中 创建 内 容 容 器 ， 不 需要 页 头 和 页 脚 ， 在 内 容 容 器 
中 制作 相应 的 内 容 。 注 意 ， 在 页 面容 器 标签 中 应 用 了 名 为 bg03 的 类 CSS 样式 ， 该 类 CSS 样式 主 
要 为 页 面 设置 背景 图 像 效 果 。 

jQuery Mobile 为 开发 者 提供 了 一 种 简便 的 过 滤 列 表 方 式 ， 如 果 需 要 实现 过 滤 列 表 功 能 ， 只 需 在 
<ul> 或 <ol> 标签 中 添加 data-filter="true" 属性 即 可 ， 例 如 以 上 的 代码 中 就 添加 了 列表 过 滤 功 能 。 


<ul data-role="listview" data-inset="true" data-filter=”true”> 


添加 列表 过 滤 功能 后 ，jQuery Mobile 会 自动 在 列表 顶部 添加 一 个 搜索 框 ， 当 用 户 在 搜索 框 中 输 
入 字符 时 ，jQuery Mobile 会 自动 过 滤 掉 不 包含 这 些 字符 的 列表 项 。 


jQuery Mobile 的 列表 过 滤 功能 采用 Ajax 过 滤 方式 ， 不 需要 等 待 整个 输入 完成 
才 开始 过 滤 ， 每 当 用 户 输 入 字符 时 ，jQuery Mobile 会 即时 过 滤 掉 不 包含 这 些 字符 的 
列表 项 。 
葬 5 辆 | 在 外 部 CSS 样式 表 文件 中 创建 名 为 .bg03 的 类 CSS 样式 ， 控 制 页 面 整体 背景 图 像 ， 如 图 20-26 
所 示 。 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 页 面 的 背景 效果 以 及 带 有 过 滤 功 能 的 列表 ， 
如 图 20-27 所 示 。 





.bg63 { 
background-image: url(../images/2312.png), url(../images/2311.jpg); 
background-repeat: repeat, no-repeat; 
background-position: left top, center top; 
background-size: auto, cover; 














图 20-26 图 20-27 


本 ”在 外 部 CSS 样式 表 文件 中 创建 相应 的 CSS 样式 ， 对 项 目 列表 的 效果 进行 设置 ， 如 图 20-28 
所 示 。 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 该 页 面 的 效果 ， 如 图 20-29 所 示 。 在 搜索 
框 中 输入 相应 的 内 容 ， 会 自动 对 下 方 的 列表 项 进行 过 滤 ， 效 果 如 图 20-30 所 示 。 


@1488 








pcity-list hi 
font-size: 24px; 
color: #FFF; 
font-weight: boeder; 
font-style: ttalic; 
text-shadow: 2px 2px 3px #333; 
padding: 16px © Spx 5epx; 
background-jmage:urt(-. /images/2364-png) ; 了 
background-repeat: no-repeat; ?7 RR 
background-position: left -66px; 


} o> 
#city-list af 
padding-top: 19px; EO 
color: #FFF; | 日 


text-shadow: lpx lpx lpx #600; 
font-weight: normal; 
} > 
fcity-tist a { 
background-color: rgba(6,6,6,6.7); 


> 


} 
#city-Llist a:hover,#main-list a:active { 
background-color: rgba(9,0,0,1); 








二 








图 20-28 图 20-30 


在 select-city.html 页 面 中 单 击 相应 的 订餐 城市 ， 即 可 进入 该 城市 餐厅 列表 页 面 ， 可 以 在 该 页 面 
中 查看 相应 的 餐厅 ， 该 页 面 的 餐厅 列表 与 首页 面 中 的 食品 类 型 列表 非常 相似 。 


制作 餐厅 列表 页 面 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 20 章 \20-3\select-restauranthtml 视频 : 光盘 \ 视 频 \ 第 20 章 \20-3-5.mp4 





[CE 新 建 HTML 5 页 面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-3\select-restaurant. 
html”。 在 <head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 
码 ， 与 前 面 的 案例 相同 。 

葬 在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div data-role="page" id="pagel" class="bg03"> 
<div data-role="content"> 
<div id="logo"><img src="images/2302.png" alt="logo"></div> 
<div id="ct-list"> 
<h1> 请 选择 餐厅 ? </h1> 
<ul data-role="listview" data-inset="true"> 
< ><a nretantta rant hen rors exterhnalr data= 
transition="slidedown"><img src="images/2313.jpg"/><h2> 乐 称 夫 达 西 餐厅 </h2><p 
class="star four">4 星 </p></a></1i> 
i><a hreses™ Fostauant=htnl Wel= “erternad dalas 
transition="slidedown"><img src="images/2314.jpg"/><h2> 成 都 印象 </h2><p class="star 
four">4 星 </p></a></1i> 
-a rete" esataurant htnl coeol= Memternalm data 
transition="slidedown"><img src="images/2315.jpg"/><h2> 欢 乐 农场 农家 菜馆 </h2><p 


class="star one">1 星 </p></a></a></1i> 
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<li><a href="Trestaurant -html" rel="external" data-transition="slidedown"><img 
src="images/2316.jpg"/><h2> 恋爱 转角 情人 餐厅 </h2><p class="star three">3 星 </p></a></a> 
</1i> 

<1i><a href="restaurant.html" rel="external" data-transition="slidedown"><img 
src="images/2317.jpg"/><h2> 星期 五 音乐 餐 吧 </h2><p class="star tow">2 星 </p></a></a></1i> 

</ul> 
</div> 
</div> 


</div> 


该 页 面 的 结构 与 首页 的 结构 非常 相似 ,创建 jQuery Mobile 页 面容 器 ， 在 该 页 面容 器 中 创建 内 容 
容器 ， 不 需要 页 头 和 页 脚 ， 在 内 容 容 器 中 制作 相应 的 内 容 ， 通 过 项 目 列表 制作 出 餐厅 列表 的 效果 。 
国 3 思 | 在 外 部 CSS 样式 表 文件 中 创建 相应 的 CSS 样式 ， 对 项 目 列表 的 效果 进行 设置 ， 如 图 20-31 
所 示 。 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 该 页 面 的 效果 ， 如 图 20-32 所 示 。 


et-Ust MT 
font-size: 24pxi 
color: 








text-shadow: 2px 2px 3px #333; 
padding: 16px © Spx Sepx; 

background- image: url(. ./images/2394.png); 
background-repeat; no-repeat; 
background-position: left -123px; 


sct-list mg 
padding: 4px; 


get- Uist af 
padding-top: 10px3 
cotor: #FFF; 
text-shadow: lpx lpx lpx #609; 
font-weight: normal; 
background-color: rgba(e,6,6,6.7); 





Wet- Hst a:hover, tet-list a:active { 
background-color: rgba(9,6,9,1); 











} 





图 20-31 图 20-32 


在 外 部 CSS 样式 表 文 件 中 创建 相应 的 CSS 样式 ， 通 过 背景 图 像 来 代替 文字 表示 星 级 ， 如 
20-33 所 示 。 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 该 页 面 的 效果 ,如 图 20-34 所 示 。 





Star { 
display: inline-block; 
background-image: url(../images/2304.png); 
background-repeat: no-repeat; 
background-position: © -182px; 
height: 22px; 
text-indent: -999px; 
font-size: Opx; 
} 
-one { width:30px; 了 
-two{ width:55px; } 
:three{ width:75px; } 
:four{ width:99px; 了 














图 20-33 图 20-34 
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在 餐厅 列表 页 面 中 单 击 某 个 餐厅 ， 即 可 进入 该 餐厅 的 介绍 页 面 ， 在 该 页 面 中 将 分 两 部 分 对 餐厅 信 
息 和 餐厅 联系 方式 进行 介绍 ， 并 且 使 用 jQuery Mobile 中 的 布局 网 格 将 介绍 信息 内 容 分 为 两 栏 显 示 。 





制作 餐厅 介绍 页 面 
最 终 文件 : 光盘 \ 最 终 文件 \ 第 20 章 \20-3vestauranthtml 视频: 光盘 \ 视 频 \ 第 20 章 \20-3-6.mp4 


[Ga 新 建 HTML 5 页面 ， 将 其 保存 为 “光盘 \ 源 文件 \ 第 20 章 \20-3\ restaurant.html”。 在 
<head> 与 </head> 标签 之 间 添 加 <meta> 标签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 
的 案例 相同 。 

葬 畏 ”在 <body> 与 </body> 标签 之 间 编 写 jQuery Mobile 页 面 代码 。 


<div data-role="page" id="pagel" class="bg03"> 
<div data-role="content"> 
<div id="logo"><img src="images/2302.png" alt="1ogo"></div> 
<!-- 餐厅 介绍 信息 开始 --> 
<div class="ui-grid-a" id="infos"> 
<div class="ui-block-a"> 
<h1> 乐 穆 夫 达 西 餐厅 </h1> 
<p> 特色 菜品 : </p> 
<ul> 
<1i> 经 典 西 冷 牛排 </1i> 
<1i> 田园 果蔬 意 面 </1i> 
<1i> 经 典 小 食 </1i> 
<1i> 海鲜 烛 饭 </1i> 
</ul> 
</div> 
<div class="ui-block-b"> 
<p><img src="images/2318.jpg" alt=""/></p> 
<p><a href="#" rel="external"> 查看 餐厅 网 站 </a></p> 
</div> 
</div> 
<!-- 餐厅 介绍 信息 结束 --> 
</div> 


</div> 


在 该 页 面 中 主要 有 两 部 分 内 容 ， 一 部 分 为 餐厅 介绍 信息 ， 另 一 部 分 为 餐厅 联系 信息 。 先 制作 餐厅 
介绍 信息 部 分 ， 在 该 部 分 中 使 用 jQuery Mobile 中 的 布局 网 格 将 内 容 区 域 分 为 两 列 ， 左 侧 部 分 放置 餐 
厅 信 息 ， 右 侧 部 分 放置 餐厅 图 片 和 链接 按钮 。 

[天 ”保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 该 页 面 默认 的 效果 ， 如 图 20-35 
所 示 。 接 下 来 需要 通过 CSS 样式 对 页 面 中 左 侧 分 栏 部 分 内 容 的 效果 进行 设置 ， 如 图 20-36 所 示 。 
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tpDyBOOK2OISHTML 去 芽 2-3 


全 ” S 4 有 





#infos hi { 
font-size: 1l8px; 
margin: © auto 5px auto; 

















#infos { } 
height: auto; #infos p { 
overflow: hidden; Line-height: 26px; 
background-color: rgba(6,6,6,9.3) ; margin:2px auto 5px auto; 
margin-top: 10px; 
padding: 16px; #infos 1i{ 
color: #FFF; list-style-type: square; 
font-size: 14px; list-style-position: inside; 
text-shadow: none; margin-left: Spx; 

} } 

图 20-36 


名 称 为 #infos 的 CSS 样式 主要 对 包含 该 部 分 内 容 的 div 进行 整体 的 设置 ， 包 


区 括 背 景 颜 色 、 填 充 、 文 字 效 果 等 。#infos h1、#infos p 和 #infos ji 分别 对 id 名 称 为 





infos 的 div 中 的 <h1> 标签 、<p> 标签 和 <li> 标签 进行 效果 设置 。 


国保 存 页 面 , 在 Opera Mobile 模拟 器 中 预览 该 页 面 , 可 以 看 到 该 页 面 的 效果 , 如 图 20-37 所 示 。 
接 下 来 需要 通过 CSS 样式 对 页 面 中 右 侧 分 栏 中 的 图 片 和 超 链接 效果 进行 设置 ， 如 图 20-38 所 示 。 
保存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 看 到 该 页 面 的 效果 ， 如 图 20-39 所 示 。 





IT GD 





nos .ui-block-b ing T 

width: 100%; 

height: auto; 

border: 2px solid #FFF; 
} 
sinfos .ui-block-b a { 

padding: 5px 16pxi 

font-size: 12px; 

color: #FFF; 

font-weight: normati 

background-color: rgba(8,6,6,6.5); 

border: lpx solid rgb(192,51,51); 

border-radius: 3px; 

float: right; 
} 
winfos .ui-block-b a:hover,sinfos .ui-block-b a:active { 

padding: Spx 19pxi 

font-size; 12pxs 

color: #F30; 

font-wetght: normal; 

background-color: rgba(9,0,0,1); 

border: 1px sot1d rgb(162,51,51); 

border-radius: 3px; 

float: right; 
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图 20-38 
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图 20-39 


[国运 回 该 jQuery Mobile 页 面 中 ， 继 续 制 作 餐 厅 联 系 信息 部 分 内 容 。 在 餐厅 介绍 信息 结束 之 后 
编写 餐厅 联系 信息 部 分 的 内 容 代码 。 


<!-- 联系 信息 --> 


<div id="contact"> 


<div class="ui-grid-a"> 


<div class="ui-block-a"> 
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<h1> 联系 信息 </h1> 
<p> 北京 市 西城 区 某 某 路 288 号 某 某 大 厦 1 层 </p> 
<p> 电话 : 010-00000000</p> 
</div> 
<div class="ui-block-b"><img src="images/2319.jpg" alt=""/></div> 
</div> 
<divid="contact buttons"> 
<a href="#" data-role="button" data-theme="b" data-icon="maps"> 在 地 
上 查找 </a> 
<a href="tel:00000000000" data-role="button" data-theme="b" data-— 
icon="tel"> 给 餐厅 打 电 话 </a> 
</div> 
</div> 


<!-- 联系 信息 --> 


在 该 部 分 内 容 中 同样 使 用 jQuery Mobile 中 的 布局 网 格 将 内 容 分 为 两 栏 , 左 侧 为 地 址 和 联系 信息 ， 
右 侧 放 置 该 餐厅 的 地 图 图 片 。 在 两 栏 布局 网 格 的 下 方 放置 两 个 链接 按钮 , 分 别 是 “在 地 图 上 查找 "和 “给 
餐厅 打 电 话 ”。 
国葬 转换 到 外 部 CSS 样式 表 文件 中 ， 创 建 相应 的 CSS 样式 ， 对 该 部 分 内 容 的 效果 进行 设置 ， 
如 图 20-40 所 示 。 保 存 页 面 ， 在 Opera Mobile 模拟 器 中 预览 该 页 面 ， 可 以 查看 该 页 面 的 效果 ， 如 
图 20-41 所 示 。 




















#contact { #contact .ui-block-b img 【 
height: auto; width: 196%; 
overflow: hidden; height: auto; 


background-color: rgba(0,0,0,0.3); border: 2px solid #FFF; 
margin-top: 10px; } - 
padding: 10px; ui-btn { 

color: #FFF; font-size: 14px; 
font-size: 14px; 


text-shadow: none; 
text-shadow: none; } , 
Ui-icon-maps { 
} background-image: url(../images/maps.png); 
background-repeat: no-repeat; 
background-position: 19px 16px; 


#contact hl { 
font-size: lapx; 














margin: 9 auto Spx auto; } 
和 -ui-icon-tel{ 
#contact p { background-image: url(../images/phone.png); 
Line-height: 26px; background-repeat: no-repeat; 
margin:2px auto Spx auto; background-position: 16px 16px; 
} } 
图 20-40 


I 完成 该 餐厅 介绍 页 面 的 制作 ， 完 整 的 页 面 代码 如 下 。 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 餐厅 介绍 页 面 </title> 


493 加 





<a href="tel:00000000000" data-role="button" data-theme="b" data— 
icon="tel"> 给 餐厅 打 电 话 </a> 
</div> 

</div> 

<!-- 联系 信息 --> 

</div> 
</div> 
</body> 
</html> 


[王国 完成 该 订餐 APP 相关 页 面 的 制作 ， 整 体 预览 效果 如 图 20-42 所 示 。 
-一 一 一 - = 
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本 章 通过 3 个 具有 代表 性 的 移动 应 用 案例 的 制作 讲解 ， 向 读者 介绍 了 使 用 HTML 5、CSS 3 与 
jQuery Mobile 相 结合 制作 移动 应 用 页 面 的 方法 。 通 过 本 章 内 容 的 学 习 ， 希 望 读 者 掌握 移动 应 用 页 面 
的 制作 方法 ， 并 能 够 开拓 读者 在 移动 应 用 设计 制作 方面 的 思路 ， 从 而 开发 出 更 优秀 的 移动 应 用 。 
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